BetterScroll——滚动插件使用

BetterScroll插件使用（vue）

实现更好的滚动效果及滚屏功能；

在基本布局完成后，不用设置css中overflow：scroll之类的滑动布局，直接new一个BS对象然后关联到要滑动区域的盒子，最后配置参数、调用API即可；

例.

分别实现以下效果：

1.左侧导航标签列表滑动，右侧详情列表滑动；

首先BS严格要求布局如下：

<div class="wrapper">
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
  <!-- 这里可以放一些其它的 DOM，但不会影响滚动 -->
</div>

接下来引入CDN或者在项目中下载npm install @better-scroll/core --save即可

然后，new BS对象

let wrapper1 = document.getElementById("left")
let wrapper2 = document.getElementById("right")
let bsLeft = new BScroll(wrapper1, {})
let bsRight = new BScroll(wrapper2, {})

这里便可以实现左右侧分别滑动，且滑动丝滑

2. 左侧点击标签，右侧相应滑动到对应位置（即点1，右侧滑到1；点2，右侧滑到2）；

思路：（1）首先要配置click,因为BS默认取消了点击事件；（2）获取点击的标签指定内容；（3）根据指定内容使bsRignt部分滚动到指定位置（scrollToElement方法）

实现：

// 打开点击事件，通常后面{}对象用于配置
let bsLeft = new BScroll(wrapper1, { click })
// 获取点击标签的内容，通常用id（唯一），事先给右侧板块每一部分内容配置好id
//获取到每次点击的id后，便可以调用滚动到指定元素的API
this.bsRight.scrollToElement(wrapper2,300)

3. 右侧滑动，左侧高亮随即改变（即右侧控制左侧）

思路：（1）要获取每一次滑动的位置（即y坐标，y为BS内置属性，可以监听scoll获得）（2）要获取右边每一个内容板块的高度（offsetHeight）；（3）计算每一个内容板块的轴区间；（4）判断当前y在哪一个范围即可确定当前滑到哪一板块；

// (1) 监听scroll
bsRight.on('scroll',({y})=>{
    y = Math.abs(y)
    for (let key of this.rangeArr) {
        if (y > key.min && y <= key.max) {
            this.liName = key.name
        }
    }
})

// 获取每一板块在y轴上起点（min）、终点（max）、id（name）
let total = 0
for (let key of this.goodsList) {
    let height = document.getElementById(key.name).offsetHeight
    this.rangeArr.push({
        min: total - 60,
        max: height + total,
        name: key.name
    })
    total += height
}

注意:在监听scoll之前要先 配置 好probeType属性，默认为0，即不派发scroll事件；
可能在newBS对象时DOM没有及时渲染，可以尝试包裹一个定时器解决