vue better-scroll 使用 下拉刷新、上拉加载

我的目的是为了实现列表的下拉刷新、上拉加载，所以选择了better-scroll这个库。
用好这个库，需要理解下面说明

必须包含两个大的div，外层和内层div
外层div设置可视的大小(宽或者高)-有限制宽或高
内层div，包裹整个可以滚动的部分
内层div高度一定大于外层div的宽或高，才能滚动

1、先开始写一个简单demo，最基本的代码架构

• template

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

• css

/*对外层div进行了高度上的限制*/
.wrapper {
    display: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height:300px;
    overflow:hidden;
}
.content {
    width:100%;
    height:800px;
    background:blue;
}

• script

import BScroll from 'better-scroll'
this.scroll = new BScroll(new BScroll(this.$refs.wrapper))

2、进行改造升级，加上上拉刷新、下拉加载的代码。

  mounted () {
    this.scroll = new BScroll(this.$refs.wrapper, {
      // 上拉加载
      pullUpLoad: {
        // 当上拉距离超过30px时触发 pullingUp 事件
        threshold: -30
      },
      // 下拉刷新
      pullDownRefresh: {
        // 下拉距离超过30px触发pullingDown事件
        threshold: 30,
        // 回弹停留在距离顶部20px的位置
        stop: 20
      }
    })
    this.scroll.on('pullingUp', () => {
      console.log('处理上拉加载操作')
      setTimeout(() => {
        // 事情做完，需要调用此方法告诉 better-scroll 数据已加载，否则上拉事件只会执行一次
        this.scroll.finishPullUp()
      }, 2000)
    })
    this.scroll.on('pullingDown', () => {
      console.log('处理下拉刷新操作')
      setTimeout(() => {
        console.log('asfsaf')
        // 事情做完，需要调用此方法告诉 better-scroll 数据已加载，否则下拉事件只会执行一次
        this.scroll.finishPullDown()
      }, 2000)
    })
  }

原理已经讲清楚了，上面的代码是一个功能示例，码友结合自己项目扩展就行啦。