better-scroll 在vue中的完美使用

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

1.html结构

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

  

    
...
    
...
    ...
  

2.安装

npm

npm install better-scroll

yarn

yarn add better-scroll

3.初始化

4.重要参数

（1）probeType

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

（2）pullUpLoad

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（）{}中使用