今天给大家介绍一款很好用的移动端滚动插件: better-scroll.JS, 它真可以算得上是实至名归, 功能可谓是相当强大了.
我们先来看看它具体有哪些优势吧.
1 原生. 不依赖于任何库或框架, 完全基于原生 JS 实现.
2 轻量. 编译后的代码大小是 63kb, 压缩后是 35kb,gzip 后仅有 9kb!
3 强大. 对于那些常规的滚动需求 (如图片轮播, 局部文字滚动等) 均可轻松满足, 完全可以媲美 Swiper.JS 和 iScroll.JS 等经典插件.
一, 用法
1. 基础用法
new BScroll(".wrapper");
或者
- let wrapper = document.querySelector('.wrapper');
- new BScroll(wrapper);
以上两种方式都可以, 其中 wrapper 为外层容器, 而它只能有一个子元素. 例如:
<div class="wrapper"> <ul class="content"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <!-- 这里可以放一些其它的 DOM, 但是会被忽略, 且不会影响 content 部分滚动 --> </div>
content 元素就是滚动元素, 它是 wrapper 的唯一子元素, 且其高度必须大于 wrapper 的高度(若为横向滚动则 content 宽度须大于 wrapper 宽度), 否则无法滚动.
我们可以继续看上面的例子, 如果要实现一个最基本的滚动效果, 还需要自己给它添加点样式才行.
/* 设置高度是为了让 content 高度大于 wrapper 高度, 否则无滚动效果 */ .wrapper{ height: 100px; overflow: hidden; background: #eee; }
这样一个简单的可滑动文字列表效果就出来了:
2. 进阶用法
上面只是简单讲了 better-scroll.JS 最基础用法, 无需任何配置即可使用. 然鹅, 很多情况下其实我们可能有其他各种类型滚动效果, 如图片轮播, 整屏滚动, 多屏多向切换等.
1 图片轮播
说到图片轮播, 我们首先可能想到的就是经典的 Swiper.JS, 而事实上我们其实还可以使用更加轻量级的 better-scroll.JS 来替代. 例如:
<div class="wrapper"> <ul class="content"> <li><img src="./images/img1.jpg" alt=""></li> <li><img src="./images/img2.jpg" alt=""></li> <li><img src="./images/img3.jpg" alt=""></li> </ul> </div> .wrapper{ width: 600px; height: 320px; overflow: hidden;} .content{ margin: 0; padding: 0; width: 1800px; overflow: hidden;} .content li{ float: left; width: 600px; list-style: none;} .content li img{ display: block; width: 100%;} new BScroll('.wrapper', { scrollX: true, scrollY: false, snap: { // 滑动切换的一些配置 speed: 800, // 滑动切换的速度 easing: { // 滑动切换的动画效果 style: 'ease-in' }, threshold: 0.5, // 滑动切换到超过一半时切换到下一屏 stepX: 600, // 横向切换距离为轮播图宽度 } });
实现效果如下:
可以看到, better-scroll.JS 相对 Swiper.JS 配置更加灵活, 这是因为前者更加偏向于自由滑动, 而后者更加偏重于轮播图效果, 如果你不想自己手写样式和这么细的滑块配置的话, 还是使用 Swiper.JS 相对好一些.
2 整屏滚动
有了上面图片轮播的案例, 整屏滚动看起来就简单了许多, 因为 better-scroll.JS 本身默认就是竖屏滚动, 因此配置会更加简洁.
<div class="wrapper"> <ul class="content"> <li > 第一屏</li> <li > 第二屏</li> <li > 第三屏</li> </ul> </div> body{ margin: 0;} .wrapper{ height: 100vh; overflow: hidden;} .content{ margin: 0; padding: 0;} .content li{ display: flex; justify-content: center; align-items: center; height: 100vh; list-style: none; font-size: 50px; font-weight: bold; color: #fff;} .content li:nth-child(1){ background: #f00;} .content li:nth-child(2){ background: #0f0;} .content li:nth-child(3){ background: #00f;} new BScroll('.wrapper', { snap: { // 滑块切换的一些配置 threshold: 0.5, // 滑动切换到超过一半时切换到下一屏 stepY: Windows.innerHeight // 纵向切换距离为窗口高度 } });
实现效果如下:
3 多屏多向切换
这个切换方式可能比较少见, 但是有时候确实可能需要实现这样的效果.
<div id="app"> <article class="container"> <section class="section"></section> <section class="section"></section> <section class="section"></section> <section class="section"></section> <section class="section"></section> <section class="section"></section> <section class="section"></section> <section class="section"></section> <section class="section"></section> </article> </div> // Less 代码 body{ margin: 0;} body, #App{ width: 100vw; height: 100vh; overflow: hidden; } .container{ display: grid; width: 300vw; height: 300vh; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; } .section{ height: 100vh; } .loop(@i) when (@i <= 9){ .section:nth-of-type(@{i}){ background: url("../images/puzzle_img@{i}.jpg") no-repeat center; background-size: cover; } .loop(@i+1); } .loop(1); new BScroll('#app', { scrollX: true, bounce: false, snap: { threshold: 0.5, stepX: Windows.innerWidth, stepY: Windows.innerHeight } });
实现效果如下:
需要注意上面 CSS 部分其实写的是 Less 代码, 里面用到了样式的循环, 所以用 Less 等预编译语言写起来会轻松一些.
二, 常见问题
1. 无法滚动
1 检查内容长度是否比外层容器长度要长, 这个在文章开头有提过.
2 检查配置是否正确, 看看是不是把滚动禁用了.
2. 无法触发点击事件
better-scroll 默认会阻止浏览器的原生 click 事件, 所以须添加以下配置:
click: true
3. 无法长按识别二维码
这个是因为 better-scroll 会阻止浏览器的默认行为, 比如页面原生的滚动功能, 当然也包括长按识别二维码的功能, 所以为了局部解除禁止, 须添加以下配置:
preventDefaultException: { className: /^(此处填二维码图片的 class 属性)$/ }
例如, 有个二维码图片标签如下:
<img class="qrcode" src="./images/qrcode.png" />
则相应的 better-scroll 配置为:
preventDefaultException: { className: /^qrcode$/ }
三, 常用配置
为了方便使用, 最后我给大家简单总结了一份比较常用的 better-scroll 配置:
{ click: true, // 元素可触发点击事件 scrollX: false, // 横向可滑动, 默认为 false scrollY: true, // 纵向可滑动, 默认为 true bounce: false, // 当滚动超过边缘的时候无回弹动画 preventDefaultException: { // 设置局部某元素原生事件不被禁止(默认 preventDefault 为 true)
className: [正则表达式]
}, snap: { // 滑动切换的一些配置 speed: 800, // 滑动切换的速度 easing: { // 滑动切换的动画效果 style: 'ease-in' }, threshold: 0.5, // 滑动切换到超过一半时切换到下一屏 stepX: Windows.innerWidth, // 横向切换距离为窗口宽度 stepY: Windows.innerHeight // 纵向切换距离为窗口高度 } }
结束语
千言万语, 不如三个字 ↓↓↓
具体用法详见→ https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/
来源: http://www.jianshu.com/p/ccc8d4823438