better-scroll 上拉刷新，下拉加载模板

npm install better-scroll --save
<template>
  <div class="tabbar">
    <div ref="wrapper" class="wrapper">
      <div class="content" ref="content">
        <!--上拉的东西-->
        <div class="top">上拉刷新</div>
        <ul>
          <li v-for="item in data" style="line-height:100px">{{item}}</li>
        </ul>
        <!--上拉的东西-->
        <div class="bottom">下拉加载</div>
      </div>
    </div>
  </div>
</template>

<script>
  import BScroll from "better-scroll"
  export default {
    data(){
      return {
        data: [0,1,2,3,4,5,6,8,8,8,8,8],
        height:0,
      }
    },
    methods: {
      getData() {
        return new Promise(resolve => {  //模拟数据请求
          setTimeout(() => {
            const arr = [];
            for (let i = 0; i < 10; i++) {
              this.data.push(i)
            }
            resolve(arr)
          }, 1000)
        })
      },
    },
    watch: {
      data(val){
        this.$nextTick(() => {
          this.scroll.refresh()
          this.scroll.finishPullUp()
        })
      }
    },
    computed: {

    },
    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('处理上拉加载操作')
        this.getData().then(res=>{
          console.log('asfsaf')
// 事情做完，需要调用此方法告诉 better-scroll 数据已加载，否则下拉事件只会执行一次
//           this.scroll.finishPullUp()
        })
      })
      this.scroll.on('pullingDown', () => {
        console.log('处理下拉刷新操作')
        this.getData().then(res=>{
// 事情做完，需要调用此方法告诉 better-scroll 数据已加载，否则下拉事件只会执行一次
          this.scroll.finishPullDown()
        })
      })
    }
  }
</script>

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