（better-scroll可适用于滚动列表、轮播图、索引列表、开屏引导、上拉加载、下拉刷新等应用场景）

最近在做一个基于Vue的webapp，用到了better-scroll这个插件，遇到一些常见的问题，把它总结一下：

首先在vue中使用better-scroll，第一步安装：

    执行命令：npm install better-scroll --S

    引入：import better-scroll from 'better-scroll'

better-scroll滚动原理：

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

（官方文档上扣下来的一张图，wrapper掉了一个a 忽略忽略...）

    绿色部分为 wrapper，也就是父容器，它要有固定的高度。黄色部分为 content，它是父容器的第一个子元素，它的高度会随着内容的大小而撑高。当 content 的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动内容区了，这就是 better-scroll 的滚动原理。

better-scroll初始化：

  vue中使用better-scroll要注意它的初始化必须在数据加载完成后，因为它在初始化的时候，会计算父元素和子元素的高度和宽度，来决定是否可以纵向和横向滚动。因此，我们在初始化它的时候，必须确保父元素和子元素的内容已经正确渲染了。如果子元素或者父元素 DOM 结构发生改变的时候，必须重新调用 scroll.refresh() 方法重新计算来确保滚动效果的正常。

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

     <ul class="content">
        <li v-for="item in data">{{item}}</li>
      </ul>

      <div class="bottom-tip">
      <span class="loading-hook">查看更多</span>
     </div> 

    <div>
  </div>
</template>
<script>
  import BScroll from 'better-scroll'
  export default {
    data() {
      return {
        data: []
      }
    },
    created() {
      this.loadData()
    },
    methods: {
      loadData() {
        var self = this;
       requestData().then((res) => {
          this.data = res.data.concat(this.data)
          this.$nextTick(() => {
            if (!this.scroll) {
              this.scroll = new Bscroll(this.$refs.wrapper, {    
                pullUpLoad:{
           threshold: -30, // 负值是当上拉到超过低部 30px；正值是距离底部距离时，
          }
              })
              this.scroll.on('touchend', (pos) => {
                // 下拉动作
                if (pos.y > 50) {
                  self.loadData()
                }
              })
              this.scroll.on('pullingUp', (pos) => {
          document.querySelector('.loading-hook').innerText = '加载中...';
          setTimeout(function () {
           // 恢复文本值
           document.querySelector('.loading-hook').innerText = '查看更多';
           // 向列表添加数据
           self.loadData();
          }, 1000);
         }) 
            } else {
                this.scroll.finishPullUp() 
                this.scroll.refresh()
            }
          })
        })
      }
    }
  }
</script>

参考文章：http://www.imooc.com/article/18232

                  https://segmentfault.com/q/1010000011950770/a-1020000011956816

                  https://juejin.im/post/59dc572c6fb9a0450f20e40e