better-scroll滚动插件

1 介绍

better scroll是一个用于滚动的第三方插件，主要用作移动端的页面滚动，具有基础滚动功能和下拉刷新、上拉加载和局部滚动等高级功能

1.1 安装

安装方式推荐直接npm安装，可以安装核心功能，其他功能作为插件安装，也可以选择全量安装

// 核心安装
npm install @better-scroll/core
// 全量安装
npm install better-scroll

1.2 引入

// 全量
import BetterScroll from 'better-scroll'

// 核心
import BScroll from '@better-scroll/core'
// or
var BScroll = require('@better-scroll/scroll')

1.3 使用

基本规则就是：wrapper中为需要滚动的页面，在BScroll的第一个参数中传递的就是该标签的引用，其下默认滚动第一个元素，也可以设置成其他元素。

基础滚动

import BScroll from '@better-scroll/core'
let bs = new BScroll('.wrapper', {
  // ...... 详见配置项
})

在vue中使用：

<template>
  <div class="core-specified-content-container">
    <div class="scroll-wrapper" ref="scroll">
      <div class="ignore-content">
        The Blue area is not taken as BetterScroll's content
      </div>
      <div class="scroll-content">
        <div class="scroll-item" v-for="n in nums" :key="n">{{n}}</div>
      </div>
    </div>
  </div>
</template>

在生命周期的mount中：

mounted:{
	init(){
		window.bs = this.bs = new BScroll(this.$refs.scroll, {
          specifiedIndexAsContent: 1,
          probeType: 3
        })
	}
}

必须保证包裹容器大小为固定：

.scroll-wrapper {
  height: 400px;
  overflow: hidden;
  border: 1px solid #42b983;
}

probeType设置3为一直监听滚动，包括惯性滑动；设置为2只在点击滑动时监听滚动，不包括惯性滑动。入参为窗口左上角坐标。滚动的时候相当于窗口从页面顶部往下走。
specifiedIndexAsContent为设置滚动元素，1表示内容中的第二个元素

注意：如果在滚动内容中存在默认无点击事件的标签，如div，如果给其绑定点击事件，则触发不了，需要将BScroll的属性：click:true这样设置才行

2 高级功能

2.1 上拉加载（触底加载）

该事件名称：pullingUp，触发：底部上拉距离超过阈值

  import BetterScroll from '@better-scroll/core'
  import Pullup from '@better-scroll/pull-up'

  BetterScroll.use(Pullup)
  const bs = new BetterScroll('.wrapper', { // 第一个参数可以是一个类或者是选择器document.querySelector(选择)
    pullUpLoad: true
  })

  bs.on('pullingUp', () => {
    await fetchData()
    bs.finishPullUp() // 该函数一调用就可以立即触发下一次，所以可以搞个延时setTimeout
  })

2.2 下拉加载（顶部刷新）

该事件名称：pullingDown，触发：顶部下拉距离超过阈值

  import BetterScroll from '@better-scroll/core'
  import Pulldown from '@better-scroll/pull-down'

  BetterScroll.use(Pulldown)
  const bs = new BetterScroll('.wrapper', {
    pullDownRefresh: true
  })

  bs.on('pullingDown', () => {
    await fetchData()
    bs.finishPullDown() // 该函数一调用就可以立即触发下一次，所以可以搞个延时setTimeout
  })

3 bug

3.1 滚动区域bug

在使用滚动组件时发现滚动区域未完全可滚动，滚动区域过小，原因是better scroll组件加载完成时会对目标子组件进行可滚动区域计算（保存在：scrollerHeight），当当前元素为完全加载时（存在异步请求），可滚动区域是小于真是可滚动区域的

解决办法：重新计算可滚动区域大小：调用better scroll组件的：refresh()方法

3.2 使用该滚动插件后sticky属性失效

由于插件是使用transform.translate方法来改变显示区域，所以，即使元素动态改成了fixed，依然不会固定住！
这里建议使用相同的两个组件，当原组件到达顶部位置，则显示出新的组件，该组件和原组件状态做好同步，并放置好位置。要注意的是，在vue中获取元素方法：this.$refs.xxx.$el。但是如果页面中有图片的话，由于图片是异步加载，所以可能此时获取到的高度是不准的，图片还没加载完成。