better-scroll的使用与封装

在手机端上使用js原生的滚动效果时会有非常卡顿的现象，此时我们可以使用第三方库 better-scroll 来解决该问题。

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

首先你的html结构需要长这样，用一个大的wrapper套一个唯一个标签，标签中是你希望滚动的内容，当然wrapper与content的名字不是非它不可，你可以自己设定。

const bscroll = new BScroll(document.querySelector('.wrapper'))

.warpper{
  height:300px;
  overflow:hidden;
}

最基本的使用就是上面这些，BScroll需要两个参数，一个 el 参数，代表根标签，一个 options 参数，代表配置信息，但如果没有其它要求，可省略 options。
给warpper设定一个具体的高度以实现局部滚动，可以看到滚动内容在wrapper中滚动，同时附带有弹簧效果。

监听滚动到什么位置:
默认情况下BScroll是不能时时监听滚动位置的，想要让它监听，需要配置options参数。

const bscroll = new BScroll('.wrapper',{
  probeType:0
})
bscroll.on('scroll',function (position) {
  console.log(position);
})

probeType参数的不同取值对于监听有不同的效果，默认情况下是0，此时不监听滚动，值为1时，只监听用户长按屏幕时的位置，值为2时，监听用户长按以及点按时的位置，但不监听屏幕的惯性滚动，值为3时，处处监听。
bscroll通过 .on 方式为不同的事件类型设置监听函数，它有两个参数，一个是 eventType ，表示监听的事件类型，一个是监听函数，当事件类型为scroll时，监听函数默认带有position参数，即位置参数。

上拉触发函数：

const bscroll = new BScroll('.wrapper',{
  probeType:0,
  pullUpLoad:true
})
bscroll.on('pullingUp',() => {
  //...
  //上拉函数默认只执行一次，只用finishPullUP()之后才能再次执行
  bscroll.finishPullUP()
})

better-scroll更多配置及示例：

国内版文档： https://better-scroll.gitee.io/docs/zh-CN/
国内版示例： https://better-scroll.gitee.io/examples

v1版本 ：https://better-scroll.gitee.io/docs-v1/doc/zh-hans/

在vue中使用，封装：

<template>
  <div ref="wrapper">
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll';
  export default {
    name: "Scroll",
    data(){
      return{
        scroll:null
      }
    },
    mounted() {
      this.scroll = new BScroll(this.$refs.wrapper,{
        //probeType:3,
        //pullingUpLoad:true
      })
    }
  }
</script>

注意通过 ref 获取元素避免多个wrapper重复的情况。