better-scroll是适用于移动端app的滚动插件，它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。

1.html结构

这是你的html代码结构，父元素包裹子元素，才可在子元素上使用此插件，若包裹多个子元素，则需要分别对每个子元素使用此插件.
必须为父元素指定高度，且子元素的高度一定要大于父元素的高度，才可实现滚动效果

<div class="wrapper">
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>

</div>

2.安装

npm

npm install better-scroll

yarn

yarn add better-scroll

3.初始化

<script>
//导入包
import BScroll from 'better-scroll'
//创建实例
let scroll = new BScroll('.wrapper')
</script>

4.重要参数

（1）probeType

 <script>
        //默认情况下BScroll是不可以实时的监听滚动位置
        //probeType检测
        //0,1都是不侦测实时的位置
        //2：在手指滚动的过程中检测，手指离开后的惯性滚动过程中不检测
        //3：只要是滚动，都检测
        let bscroll = new BScroll(document.getElementsByClassName('wrapper'),{
            probeType:3
        })
        bscroll.on('scroll',(position)=>{
            console.log(position)
        })
    </script>

以上代码将会打印出滚动的实时位置

（2）pullUpLoad

 <script>
        let bscroll = new BScroll(document.getElementsByClassName('wrapper'),{
           pullUpLoad:true
        })
        bscroll.on('pullingUp',()=>{
           //此处应请求网络数据
           console.log("上拉加载更多")
           setTimeout(()=>{
               bscroll.finishPullup()
           },2000)
        })
    </script>

pullUpLoad

类型：Boolean | Object
默认值：false
作用：这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载，可以配置离底部距离阈值（threshold）来决定开始加载的时机，见 Demo 。了解更多的细节可以去看 example 中的 scroll 组件代码。

pullUpLoade参数一定要配合pullingUp，finishPullUp使用，
pullingUp的触发时机是在一次上拉加载的动作后，这个时机一般用来去后端请求数据。
finishPullUp则是当上拉加载数据加载完毕后，需要调用此方法告诉 better-scroll 数据已加载，若没有调用此方法，则上拉加载的动作执行完一次就不能再次执行了

pullDownLoad同理

5.注意点

（1）better-scroll不能再created（）{}里使用，因为此时还没有渲染页面DOM树，应在mounted（）{}中使用

better-scroll 在vue中的完美使用