场景
很多时候在做移动端应用时，都需要实现滚动的开发，少数情况下会使用原生自带的scroll ，但是对于用户体验可能存在一些问题，比如：卡顿、过渡不顺畅等等。那这个时候就会想着那如何对这个需求进行开发呢？如何实现呢？大多数人应该会选择使用三方库来实现吧，少数部分人可能会自己封装一个库进行实现。那今天就来看一下better-scroll这个库吧！！！
better-scroll 是什么
better-scroll 是一款解决移动端各种滚动场景需求的插件；同时也支持pc端的需求场景开发。说到这个插件，务必提一下iscroll这个插件，因为其核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。目前最适合的前端框架Vue
安装
yarn add better-scroll
or
npm install better-scroll --save
通过import进行引入：import xx from 'better-scroll'
使用
最常见的场景就是ul > li 的展示。。。
<div class="wrapper">
<ul class="content">
<li>...</li>
<li>...</li>
...
</ul>
<!-- 这里可以放一些其它的 DOM，但不会影响滚动 -->
</div>
better-scroll 是作用在外层 wrapper 容器上的，滚动的部分是 content 元素。这里要注意的是，better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略。
具体使用方式：
import BScroll from 'better-scroll'
let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper)
ps: 这里通过querySelector进行元素的查找，但是在项目不推荐使用这种方式，推荐使用：ref 进行元素的绑定和查找，避免出现多组件同时定义同一个类名等
滚动原理
下面看一张图，了解一下better-scroll时如何实现滚动的。
清晰可以看出来，绿色部分就是父组件，需设置固定的高度，其余为滚动元素；滚动的前提时子元素的内容高度要大于父元素的高度，否则不会滚动（ps：以下用bs代表better-scroll）
API
常用的一些api
on
on( type, fn, context)
type：事件名
fn： 回调函数
context： 上下文->this
监听当前实例上的自定义事件。如：scroll, scrollEnd, pullingUp, pullingDown等。
scroll （事件）
bs.on(“scroll”,function(){})
参数：{Object} {x, y} 滚动的实时坐标
触发时机：滚动过程中，具体时机取决于选项中的 probeType。
probeType
类型：Number
默认值：0
可选值：1、2、3
作用：有时候我们需要知道滚动的位置。当 probeType 为 1 的时候，会非实时（屏幕滑动超过一定时间后）派发scroll 事件；当 probeType 为 2 的时候，会在屏幕滑动的过程中实时的派发 scroll 事件；当 probeType 为 3 的时候，不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件。如果没有设置该值，其默认值为 0，即不派发 scroll 事件。
refresh
参数: 无
触发时机：refresh 方法调用完成后。
pullUpLoad
类型：Boolean | Object
默认值：false
作用：这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载，例如：
pullUpLoad: {
threshold: 50
}
可以配置离（threshold）来决定开始加载的时机。当上拉加载数据加载完毕后，需要执行 finishPullUp 方法。见 Demo 。 了解更多的细节可以去看 example 中的 scroll 组件代码。
finishPullUp()
参数：无
返回值：无
作用：当上拉加载数据加载完毕后，需要调用此方法告诉 better-scroll 数据已加载。
注意：以下几个是较新的api，如果使用版本太旧，不能使用
observeDOM(v1.5.3+)
类型：Boolean
默认值：true
作用：会检测 scroller 内部 DOM 变化，自动调用 refresh 方法重新计算来保证滚动的正确性。它会额外增加一些性能开销，如果你能明确地知道 scroller 内部 DOM 的变化时机并手动调用 refresh 重新计算，你可以把该选项设置为 false。
autoBlur(v1.7.0+)
类型：Boolean
默认值：true
作用：在滚动之前会让当前激活的元素（input、textarea）自动失去焦点。
stopPropagation(v1.9.0+)
类型：Boolean
默认值：false
作用：是否阻止事件冒泡。多用在嵌套 scroll 的场景。
扽等。有兴趣的小伙伴可以去官网/博客去了解更多、更高级的用法。。。
