项目环境 vue + betterScroll

获取接口数据

 async getUserList(val) {
      let url = "你的接口";
      let params = {
        type: this.navBar[this.navIndex].type,
      };
      try {
        const res = await http.get(url, params);
        if (res.data.code == 0) {
          let data = res.data.data.list;
          this.group = this.grouplist(data,10);
          this.giftList = [...this.giftList, ...this.group[0]];
        }
      } catch (error) {}
    },
     // 把一个数组按照一定长度分割成若干数组
    grouplist(array, subGroupLength) {
        let index = 0;
        let newArray = [];
        while (index < array.length) {
            newArray.push(array.slice(index, index += subGroupLength));
        }
        return newArray;
    }

处理过后的数据结构，如下:

微信图片_20191213092927.png

better-scroll滑动, 拼接数据:

    this.scroll = new BScroll(this.$refs.wrapper, {
      click: true,
      // 上拉加载
      pullUpLoad: {
        // 当上拉距离超过30px时触发 pullingUp 事件
        threshold: -30,
        stop: 40
      },
      // 下拉刷新
      pullDownRefresh: {
        // 下拉距离超过30px触发pullingDown事件
        threshold: 30,
        // 回弹停留在距离顶部20px的位置
        stop: 20
      }
    });
    this.scroll.on("pullingUp", () => {
      this.page_count++; *page_count初始值为0，可用在this.group中的索引拿值*
      this.loading = true;
      setTimeout(() => {
        if(this.page_count < this.group.length){
          this.giftList = [...this.giftList, ...this.group[this.page_count]];
          if(this.group.length - this.page_count === 1){
            this.tips = "没有更多数据了";
          }
        }
        this.loading = false;
        this.scroll.finishPullUp();
        this.scroll.refresh(); //刷新wrapper容器高度
      }, 1000);
    });
    this.scroll.on("pullingDown", () => {
      this.tips = "加载中...";
      this.refresh = true;
      this.page_count = 0;
      setTimeout(() => {
        this.giftList = this.group[this.page_count];
        this.refresh = false;
        this.scroll.finishPullDown();
        this.scroll.refresh(); //刷新wrapper容器高度
      }, 1000);
    });