vue.js移动端app之上拉加载以及下拉刷新实战

stop:40*DEVICE_RATIO
}
/*上拉配置*/
const UP_CONFIG={
threshold:-80*DEVICE_RATIO,
}

this.scroller = new BScroll(scrollWrap,{
click:true,
probeType:3,
pullDownRefresh:DOWN_CONFIG,
pullUpLoad:UP_CONFIG
});

实例化后，接下来就是监听上拉和下拉事件了。betterScroll新增了一些事件，主要的有：

/*下拉事件*/
this.scroller.on('pullingDown',()=> {});
/*上拉事件*/
this.scroller.on('pullingUp',()=>{});

触发上拉或者下拉事件后，需要我们调用 this.scroller.finishPullDown() 或者 this.scroller.finishPullUp() 来通知better-scroll事件完成。

大致的流程是这样的：

this.scroller.on('pullingDown',()=> {
  <!-- 1. 发送请求获取数据 -->
  <!-- 2. 获取成功后，通知事件完成 -->
  <!-- 3. 修改data数据，在nextTick调用refresh -->
});

通常操作完成后都需要我们手动触发refresh方法来重新计算可滚动的距离，因此可以写一个watch监听数据的变化，这样我们只需要改变数据，不用每次操作数据后都调用refresh方法。

watch:{
 dataList(){
  this.$nextTick(()=>{
   this.scroller.refresh();
  })
 }
},

如果你使用的版本还是旧的，那可以在on( scroll )事件的时候进行判断来实现功能

this.scroller.on("scroll",(pos)=>{
  //获取整个滚动列表的高度
  var height=getStyle(scroller,"height");
  //获取滚动外层wrap的高度
  var pageHeight=getStyle(scrollWrap,"height");
  //触发事件需要的阀值
  var distance=80*DEVICE_RATIO;
  //参数pos为当前位置
  if(pos.y>distance){ 
    //console.log("下拉");
    //do something
  }else if(pos.y-pageHeight<-height-distance){
    //console.log("上拉");
    //do something
  }

为了防止多次触发，需要加2个开关类的东西;

var onPullUp=true;
var onPullDown=true;

每次触发事件时，將对应的开关设置为false, 等操作完成后，再重新设置为true,否则多次下拉或者上拉就会触发多次事件。通过设置开关可以保证每次只有一个事件在进行。

最后，来封装成一个组件

 <template>
  <div ref="wrapper" class="list-wrapper">
    <div class="scroll-content">
      <slot></slot>
    </div>
  </div>
</template>

由于每个页面需要滚动的具体内容都是不一样的，所以用了一个插槽来分发。