better-scroll 实现下拉刷新、上拉加载的那些坑

**下载better-scroll**
`npm i better-scroll --save `
pulldown，监听下拉动作，可以实现下拉刷新；

• pullup，监听上拉动作，可以实现上拉加载；
• scrollbar，自定义滚动条；
• slide，用于实现轮播图效果；
• wheel，是实现类似 IOS picker 的基石，可以实现城市联动选择器；
• zoom，实现缩放效果；
• mouse-wheel，鼠标滚轮操作，可以用来操作列表内容滚动、轮播图的切+ 换等；
• observe-dom，开启对scroll区域dom改变的监听；当dom改变时，触发对应的函数；
• infinity，实现无限滚动，有大量的列表数据需要渲染时使用，它可以实现部分渲染；
• nested-scroll，实现双层嵌套的滚动效果；
• better-scroll，包含以上的所有插件

下拉刷新 上拉加载

使用better-scroll 实现下拉刷新、上拉加载时要注意以下几点：

• wrapper里必须只有一个子元素；
• 子元素的高度要比wrapper要高；
• 使用的时候，要确定DOM元素是否已经生成，必须要等到DOM渲染完成后，再new BScroll();
• 滚动区域的DOM元素结构有变化后，需要执行刷新 refresh() ；
• 上拉或者下拉，结束后，需要执行finishPullUp()或者finishPullDown()，否则将不会执行下次操作；
• better-scroll，默认会阻止浏览器的原生click事件，如果滚动内容区要添加点击事件，需要在实例化属性里设置click:true；

<template>
  <div>
    <div class="box"></div>
    <!-- ........... -->
    <div class="wrapper left" ref="wrapper">
      <div class="bscroll-container">
        <!-- 刷新提示信息 -->
        <div class="top-tip">
          <span class="refresh-hook">{{ pulldownMsg }}</span>
        </div>
        <!-- 内容列表..........-->

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

        <!-- 底部提示信息........... -->
        <div class="bottom-tip">
          <span class="loading-hook">{{ pullupMsg }}</span>
        </div>
      </div>
    </div>
    <!-- ............ -->
  </div>
</template>

<script>
import BScroll from 'better-scroll';
// let count = 1;
export default {
  name: 'Z',
  data() {
    return {
      data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 20],
      pulldownMsg: '下拉刷新 ',
      pullupMsg: '加载更多 ',
    };
  },
  mounted() {
    this.init()
  },
  methods:{
     init(){
        const that = this;
    // 创建Better-Scroll对象
    this.scroll = new BScroll(this.$refs.wrapper, {
      probeType: 1, //滚动的时候会派发scroll事件，会节流
      click: true, //派发click事件
      // 开始滑轮
      mouseWheel: true,
      // 开启下拉刷新
      pullDownRefresh: {
        threshold: 50,
        stop: -10,
      },
      // 下拉加载
      pullUpLoad: {
        threshold: 50,
      },
    });
    //监听下拉刷新
    // 当下拉的时候向后端发送请求
    this.scroll.on('pullingDown', () => {
      console.log('我是下拉刷新');
      this.scroll.finishPullDown();
    });
    // 监听上拉加载
    // 当上拉的时候向后端发送请求
    this.scroll.on('pullingUp', () => {
      console.log('我是上拉加载');
      // 当上拉加载数据加载完毕后，需要调用此方法告诉 better-scroll 数据已加载。
      // 不然就会执行一次
      this.scroll.finishPullUp();
    });
    // //滑动结束松开事件
    this.scroll.on('touchEnd', pos => {
      //上拉刷新
      // console.log('我是posy', pos);
      if (pos.y > 200) {
        setTimeout(() => {
          this.pulldownMsg = ' ';
          this.scroll.refresh(); //重新计算高度
        }, 2000);
      } else if (pos.y < this.scroll.maxScrollY - 200) {
        this.pullupMsg = ' ';
      }
    });
  }
  }
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 40px;
  background: #000;
}
.wrapper {
  width: 20%;
  height: 500px;
  background: rgb(245, 247, 249);
  overflow: hidden;
  position: relative;
}
#aaa {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
/* 下拉、上拉提示信息 */
.top-tip {
  position: absolute;
  top: -40px;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #555;
}
.bottom-tip {
  width: 100%;
  height: 35px;
  line-height: 35px;
  text-align: center;
  color: #777;
  position: absolute;
  bottom: -35px;
  left: 0;
}
</style>