学习mescroll的下拉刷新、上拉加载

mescroll的uni版本, 是在 uni-app 运行的下拉刷新和上拉加载的组件,用着挺不错的

结合官网看 认真看官方文档收获十分大
官网讲解很详细:http://www.mescroll.com/uni.html#mescrolluni

mescroll的最重要的两个事件
上拉事件下拉事件

上拉加载事件示例:

  <mescroll-uni
          ref="mescrollRef"
          @init="mescrollInit"
          @down="downCallback"
          @up="upCallback"
          :down="downOption"
          :up="upOption"
          :fixed="false"
          >
        </mescroll-uni>

  /* 上拉加载的回调事件  */
    async upCallback(pageObj) {
      console.log(pageObj, "pageObj");
       /*  pageObj里面有num和size值 */
      const current = pageObj.num; // 页码, 默认从1开始
      const size = pageObj.size; // 页长, 默认每页10条
      const res = await TechnicalData({
        page: { current, size },
      });
      console.log({ ...this.searchFiltersObj }, "...this.searchFiltersObj");
      if (!res || res.code !== "200" || !res.data) {
        //  请求失败,隐藏加载状态
        uni.showToast({
          title: res.msg || res.message,
          icon: "error",
        });
        this.mescroll.endErr();
        console.log(res, "resdddddddddddddd");
        return;
      }
      if (pageObj.num === 1) this.TechnicalData = []; // 如果是第一页需手动置空列表
      this.TechnicalData = [...this.TechnicalData, ...res.data];
      const data = res.data;
      // 接口返回的当前页数据列表 (数组)
      // const curPageData = data.records;
      const curPageData = data;
      // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
      const curPageLen = curPageData.length;
      // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
      // 值对不上
      // const totalSize = data.total;
      const totalSize = data;
      this.mescroll.endBySize(curPageLen, totalSize);
    },

注意: mescroll无需配置pages.json (检查是否配置了多余的属性)