在vue中使用better-scroll

BetterScroll是一款重点解决移动端各种滚动场景需求的开源插件，适用于滚动列表、选择器、轮播图、索引列表、开屏引导等应用场景。在移动端使用可以开发出更好更炫的滑动效果。

中文文档：better-scroll

下面介绍在vue项目中，如何使用better-scroll和进行简单封装

• 安装

npm install  better-scroll --save

• 在需要的组件引用

import BScroll from 'better-scroll'

• 然后需要一个容器，需要注意的是，better-scroll容器只会使第一个子元素滚动，所以推荐使用下面这种结构：

<div ref="wrapper" class="wrapper">  //better-scroll容器
    <div>
         <!-- 要放的元素  -->
    </div>
</div>

• 接下来就是初始化better-scroll，这里有一个需要注意的地方，better-scroll初始化必须在dom元素加载完毕后才能初始化成功，所以一般都放在mounted这个钩子函数去执行，但有时候页面加载比较慢，还是会出现错误，所以下面推荐两种比较简单也是最常用的方法：

mounted() {
  setTimeout(() => {
    if(!this.$refs.wrapper)
      {
        return   //再加一次判断，防止dom没有加载出来而报错
      }
      this.scroll = new BScroll(this.$refs.wrapper,{})  
      // better-scroll的初始化接收两个参数，第一个是dom元素，第二个是配置项对象，可以不传
  },20)
}

第二种方法和上面类似，不使用setTimeout，使用vue中的$nextTick函数,在这个函数里初始化。

• 到这里初始化就完成了，但！很容易忽略的一个点，注意到我上面给容器加了一个class吗，如果不给这个容器设置高度，这个better-scroll是无效的，而且需要加上overflow:hidden属性,一般移动端的需求是整屏的高度或者整屏去掉头尾的高度，可以这样写:

.wrapper{
    overflow:hidden;
    position:fixed;
    top: xxxxxx   //看你具体需求
    bottom: xxxxxx  //同上
}

下面是我自己封装一个scroll组件的方法:

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

<script>
import BScroll from 'better-scroll'
export default {
  props: {   //外部组件引用时，可以传入相关的配置属性，下面简单使用一个
    click: {
      type: Boolean,
      default: true //因为better-scroll默认会掩盖里面元素的点击事件，所以一般设置点击为TRUE
     },
     data: {    //外部传过来的数据，主要是监听数据的变化，刷新容器的计算,因为vue是数据渲染dom
       type: Array,
       default: null
      }
   },
   mounted() {
     setTimeout(() => {
       if(!this.$refs.wrapper){
         return
       }
       this.scroll = new BScroll( this.$refs.wrapper,{
         click: this.click
       }),20)
    },
    methods: {
      // 作用：重新计算 better-scroll，当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常。
      refresh() {
        this.scroll && this.scroll.refresh()
      }
    },
    watch: {  
      data() {  //监听外面数据的变化，重新计算 better-scroll
        this.refresh()
      }
    }
}

这就简单封装了一个scroll组件，使用的时候要需要滚动的元素放在这个组件里面就可以，自己根据官方的文档看需要什么配置，在props定义好，使用的时候传就可以。可以简单达到组件复用和代码抽象的效果。