简介
- Better-Scroll是一款专注于滚动的插件
- 当在浏览器端,由于ta的加持,还算顺畅
- 但在移动端,没有了浏览器,就会出现卡顿的现象
- 此插件就是解决这个问题,让滚动流畅,带来极致享受
使用(vue)
安装:
npm install better-scroll --save
引入:
import BScroll from 'better-scroll'
使用:
<div class="wrapper"><!--class名字可以随便起,用ta来包括滚动内容-->
...
</div>
<script>
mounted() {
const bscroll = new BScroll(document.querySelector('.wrapper'), {
/**
* 默认情况下 BScroll 是不能监听滚动位置的
* 我们需要使用ta的一个属性 probeType
* 值为0或1不监测
* 值为2,开启监测,但监测不到手指离开的惯性滚动
* 值为3,监测任何滚动
*/
probeType: 3,
/**
* BScroll包括的button标签默认是不能点击的
* 如果有需要,我们可以手动将 click 属性设为true
*/
click: true,
/**
* 当你滚动到底部需要加载新的数据时,可以使用此属性
*/
pullUpLoad: true
}) //传入标签、class或id定位到dom元素
// 监听加载请求
bscroll.on('pullingUp', () => {
console.log('加载代码...')
/**
* 加载完成后必须通知ta结束这次加载
* 才会执行下一次加载
*/
bscroll.finishPullUp()
})
// 监听滚动
bscroll.on('scroll', {
// ...
})
}
</script>