vue实现下拉加载更多-526互联

1、首先下载插件 npm install better-scroll

2、循环列表的上级，上上级分别添加属性，如图：

3、data里面添加字段

data() {
    return {
      myScroll: null,
      pullLoadingBottom: 0,
      pullLoading: false,
      top: 0
    };
  },

4、methods定义方法

eventMove() {
      document.addEventListener("touchend", () => {
        this.top = this.$refs.bsCon.getBoundingClientRect().top;
    });
 },
load() {
    this.pullLoading = true;
    if (this.page >= this.lastpage) {
    this.toast = this.$createToast({
       txt: "已加载完成",
       type: "txt"
     }).show();
    } else {
      if (this.lastpage == 1) {
      } else if (this.lastpage >= 2) {
        this.page += 1;
        this.getContractData();//接口数据调用拼接
      }
    }
  },

5、mounted调用及配置

    this.eventMove();
    this.myScroll = new BScroll(this.$refs.bsWrap, {
      probeType: 1,
      scrollY: true,
      click: true,
      mouseWheel: true,
      pullUpLoad: {
        threshold: -30
      }
    });
    this.myScroll.on("pullingUp", () => {
      this.pullLoadingBottom = ".1rem";
      if (this.page < this.lastpage && !this.pullLoading) {
        this.load();
      } else if (this.page >= this.lastpage) {
        this.pullLoading = false;
      }
      this.myScroll.finishPullUp();
    });

6、数据更新后调用updated

updated() {
   this.myScroll.refresh();
}

综上流程，数据就可以更新下载啦^_^