在手机端上使用js原生的滚动效果时会有非常卡顿的现象,此时我们可以使用第三方库 better-scroll 来解决该问题。
<div class="wrapper">
<ul class="content">
<li>...</li>
</ul>
</div>
首先你的html结构需要长这样,用一个大的wrapper套一个唯一个标签,标签中是你希望滚动的内容,当然wrapper与content的名字不是非它不可,你可以自己设定。
const bscroll = new BScroll(document.querySelector('.wrapper'))
.warpper{
height:300px;
overflow:hidden;
}
最基本的使用就是上面这些,BScroll需要两个参数,一个 el 参数,代表根标签,一个 options 参数,代表配置信息,但如果没有其它要求,可省略 options。
给warpper设定一个具体的高度以实现局部滚动,可以看到滚动内容在wrapper中滚动,同时附带有弹簧效果。
监听滚动到什么位置:
默认情况下BScroll是不能时时监听滚动位置的,想要让它监听,需要配置options参数。
const bscroll = new BScroll('.wrapper',{
probeType:0
})
bscroll.on('scroll',function (position) {
console.log(position);
})
probeType参数的不同取值对于监听有不同的效果,默认情况下是0,此时不监听滚动,值为1时,只监听用户长按屏幕时的位置,值为2时,监听用户长按以及点按时的位置,但不监听屏幕的惯性滚动,值为3时,处处监听。
bscroll通过 .on 方式为不同的事件类型设置监听函数,它有两个参数,一个是 eventType ,表示监听的事件类型,一个是监听函数,当事件类型为scroll时,监听函数默认带有position参数,即位置参数。
上拉触发函数:
const bscroll = new BScroll('.wrapper',{
probeType:0,
pullUpLoad:true
})
bscroll.on('pullingUp',() => {
//...
//上拉函数默认只执行一次,只用finishPullUP()之后才能再次执行
bscroll.finishPullUP()
})
better-scroll更多配置及示例:
国内版文档: https://better-scroll.gitee.io/docs/zh-CN/
国内版示例: https://better-scroll.gitee.io/examples
v1版本 :https://better-scroll.gitee.io/docs-v1/doc/zh-hans/
在vue中使用,封装:
<template>
<div ref="wrapper">
<div class="content">
<slot></slot>
</div>
</div>
</template>
<script>
import BScroll from 'better-scroll';
export default {
name: "Scroll",
data(){
return{
scroll:null
}
},
mounted() {
this.scroll = new BScroll(this.$refs.wrapper,{
//probeType:3,
//pullingUpLoad:true
})
}
}
</script>
注意通过 ref 获取元素避免多个wrapper重复的情况。