一、better-scroll基本使用
1.基础用法
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
宽度),否则无法滚动。
2.进阶用法
① 图片轮播
------说到图片轮播,我们首先可能想到的就是经典的 Swiper.js,而事实上我们其实还可以使用更加轻量级的 better-scroll.js 来替代。例如:
1.结构表
<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>
2.样式表(swiper.js不需要手写样式)
.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%;}
3.javascript代码
new BScroll('.wrapper', {
scrollX: true,
scrollY: false,
snap: { // 滑动切换的一些配置
speed: 800, // 滑动切换的速度
easing: { // 滑动切换的动画效果
style: 'ease-in'
},
threshold: 0.5, // 滑动切换到超过一半时切换到下一屏
stepX: 600, // 横向切换距离为轮播图宽度
}
});
② 整屏滚动
------有了上面图片轮播的案例,整屏滚动看起来就简单了许多,因为 better-scroll.js 本身默认就是竖屏滚动,因此配置会更加简洁。
1.结构表
<div class="wrapper">
<ul class="content">
<li>第一屏</li>
<li>第二屏</li>
<li>第三屏</li>
</ul>
</div>
2.样式表(swiper.js不需要手写样式)
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;}
3.javascript代码
new BScroll('.wrapper', {
snap: { // 滑块切换的一些配置
threshold: 0.5, // 滑动切换到超过一半时切换到下一屏
stepY: window.innerHeight // 纵向切换距离为窗口高度
}
});
② 多屏多向滚动
------类似于九宫格滚动。
1.结构表
<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>
2.样式表(swiper.js不需要手写样式)
// 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);
3.javascript代码
new BScroll('#app', {
scrollX: true,
bounce: false,
snap: {
threshold: 0.5,
stepX: window.innerWidth,
stepY: window.innerHeight
}
});
二、better-scroll常见问题
1.滚动问题
①无法滚动:内容长度是否大于容器长度
②滚动异常:滚动区域长度是由scrollerHeight属性决定的
- 原因:页面加载时,scrollerHeight属性开始计算,但图片未加载完毕,所以图片的高度未计算入scrollerHeight内。
- 解决方案:
- a. 给img嵌套外层容器并设置一定高度
- b. 给img绑定监听load事件,在加载完毕后执行scroll的refresh方法
- PS:多张图片加载触发多次load事件,执行N次load的回调函数中的refresh方法,造成性能浪费。可以使用防抖函数
deshake(fns,delay){// fns为refresh方法
let timer = null
return function(...args){
if(timer) clearTimeout(timer);
timer = setTimeout(()=>{
fns.apply(this,args)
},delay)
}
},
③refresh方法为underfined:在mouted生命周期中使用,而不是created。
2.点击问题
- 默认option—{click:false}此时button可以监听,其他标签无法监听点击事件
3.上拉/下拉加载
①上拉加载:
- 设置pullUpLoad为true或者赋值Obj
pullUpLoad: {threshold: -30 // 当上拉距离超过30px时触发 pullingUp 事件 }
or
pullUpLoad: true
- 绑定pullingUp事件
this.scroll.on('pullingUp', () => {
// 做些事件
this.scroll.finishPullUp()// 做完事情后调用此方法告诉BS本次上拉加载完成,下次加载才能开始
}
②下拉加载:
- 设置pullDownRefresh为true或者赋值Obj
pullDownRefresh: {
threshold: -30 // 当上拉距离超过30px时触发 pullingUp 事件
stop: 20 // 回弹停留在距离顶部20px的位置
}
or
pullDownRefresh: true
- 绑定pullingDown事件
this.scroll.on('pullingDown', () => {
// 做些事件
this.scroll.finishPullDown()// 做完事情后调用此方法告诉BS本次下拉加载完成,下次加载才能开始
}
4.keep-alive卡顿
- 返回路由可能发生:1.滚动到顶部 2. 滚动到离开时的位置
- 设置以下生命周期钩子可以保证滚动到离开时的位置
activated() {
this.$refs.scroll.refresh();
this.$refs.scroll.scrollTo(0, this.saveY, 0)
},
deactivated() {
//保存Y值
this.saveY = this.$refs.scroll.scroll.y
},
5.二维码识别
- 因为 better-scroll 会阻止浏览器的默认行为,比如页面原生的滚动功能,当然也包括长按识别二维码的功能,所以为了局部解除禁止,须添加以下配置:
preventDefaultException: {
className: /^(此处填二维码图片的class属性)$/
}
// 例如:<img class="qrcode" src="./images/qrcode.png" />
// preventDefaultException: {
// className: /^qrcode$/
// }
三、常用配置
1.option参数配置
{
startX: 0 // (默认值:0) 表示X轴滚动的起始值
startY: 0 // (默认值:0) 表示Y轴滚动的起始值
click: true, // 元素可触发点击事件
scrollX: false, // 横向可滑动,默认为false
scrollY: true, // 纵向可滑动,默认为true
freeScroll: false //(默认值:false) 自由方向滚动
momentum: true // (默认值:true) 当快速滑动时是否开启滑动惯性
bounce: true // (默认值:true) 是否启用回弹动画效果
bounceTime: 700 // (默认值:700,单位:ms)回弹动画的动画时长。
preventDefault: true // 是否阻止默认事件
preventDefaultException: { // 设置局部某元素原生事件不被禁止(默认preventDefault为true)
className: 【正则表达式】
},
snap: { // 滑动切换的一些配置
speed: 800, // 滑动切换的速度
easing: { // 滑动切换的动画效果
style: 'ease-in'
},
threshold: 0.5, // 滑动切换到超过一半时切换到下一屏
stepX: window.innerWidth, // 横向切换距离为窗口宽度
stepY: window.innerHeight // 纵向切换距离为窗口高度
},
probeType: 0
//可选值:1、2、3; (默认值: 0 不派发scroll事件)想要获取滚动实时位置时派发事件的截流情况
// 1 滚动的时候会派发scroll事件,会截流;
// 2 滚动的时候实时派发scroll事件,不会截流;
// 3 除了实时派发scroll事件,在swipe的情况下仍然能实时派发scroll事件;
// 当 probeType 为 1 的时候,会非实时(屏幕滑动超过一定时间后)派发scroll 事件;当 probeType 为 2 的时候,会在屏幕滑动的过程中实时的派发 scroll 事件;当 probeType 为 3 的时候,不仅在屏幕滑动的过程中,而且在 momentum 滚动动画运行过程中实时派发 scroll 事件。如果没有设置该值,其默认值为 0,即不派发 scroll 事件。
}
2.event事件
- beforeScrollStart - 滚动开始之前触发
- scrollStart - 滚动开始时触发
- scroll - 滚动时触发
- scrollCancel - 取消滚动时触发
- scrollEnd - 滚动结束时触发
- touchend - 手指移开屏幕时触发
- flick - 触发了 fastclick 时的回调函数
- refresh - 当 better-scroll 刷新时触发
- destroy - 销毁 better-scroll 实例时触发
3.函数列表
- scrollTo(x, y, time, easing)
滚动到某个位置,x,y 代表坐标,time 表示动画时间,easing 表示缓动函数 - scrollToElement(el, time, offsetX, offsetY, easing)
滚动到某个元素,el(必填)表示 dom 元素,time 表示动画时间,offsetX 和 offsetY 表示坐标偏移量,easing 表示缓动函数 - refresh()
强制 scroll 重新计算,当 better-scroll 中的元素发生变化的时候调用此方法 - getCurrentPage()
snap 为 true 时,获取滚动的当前页,返回的对象结构为 {x, y, pageX, pageY},其中 x,y 代表滚动横向和纵向的位置;pageX,pageY 表示横向和纵向的页面索引。用法如:getCurrentPage().pageX - goToPage(x, y, time, easing)
snap 为 true,滚动到对应的页面,x 表示横向页面索引,y 表示纵向页面索引, time 表示动画,easing 表示缓动函数(可省略不写) - enable()启用 better-scroll,默认开启
- disable() 禁用 better-scroll
- destroy() 销毁 better-scroll,解绑事件