BScroll

Posted on Edited on
  • 原生的js滚动在移动端上会发生卡顿，没有惯性和首尾弹簧功能，于是选择Better Scroll这个框架来适配移动端的滚动
  • 优点：使用原生JS，不依赖任何框架，体积小

BScroll的安装

安装：npm install better-scroll --save

引用：

  1. vue项目：import BScroll from 'better-scroll'
  2. js项目：直接下载bscroll.js文件然后引入就可以

使用

HTML部分：

  • 在最外面需要包一层
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="content">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

JS部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//实现滚动功能
const bscroll = new BScroll(document.querySelector('.content'),{});


//监听实时滚动位置
const bscroll = new BScroll(document.querySelector('.content'),{
    probeType:2
    //0或者1都是不检测实时位置
    //2:在手指滚动的过程中侦测，手指离开后的惯性滚动过程不侦测
    //3:在手指滚动和惯性滚动过程都进行侦测
});


//上拉加载更多
const bscroll = new BScroll(document.querySelector('.content'),{
    pullUpLoad: true
});
bscroll.on('pullingUp',() => {
    console.log('发生上拉加载动作，发送网络请求的代码可以写在这里');
    
    //等数据请求完成，并且将新的数据展示出来之后
    //调用这个函数之后才能进行下一次的下拉加载更多
    setTimeout(() => {
        bscroll.finishPullUp()
    },2000)
})

点击回到顶部

对new出来的BScroll对象使用scrollTo方法

bscroll.scrollTo(0,0，500)500毫秒回到顶部

缺点

当滚动内容里面有图片时会偶尔出现bug，可能在 BS计算滚动内容的高度的时候图片还没加载过来，这时会导致记得算出来的高度比实际的高度低出现滚动问题

解决办法：图片的@load监听图片加载完成再对BS进行refresh