微信小程序 下拉刷新 上拉加载更多

360 阅读1分钟
  1. 下拉刷新 页面json内加入 "enablePullDownRefresh": true,
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
   onPullDownRefresh: function () {
    setTimeout(() => {
      wx.stopPullDownRefresh({
        success: (res) => {
          this.data.pageNo = 1;//页码重置
          this.getList();//加载数据
        },
      });
    }, 200);
  },
//加载数据
async getList() {
    const { result, message } = await homeList({
      pageNo: this.data.pageNo,
    });
    //第一页则清空旧数据
    if (this.data.pageNo === 1) this.data.list = [];
    //如果接口返回数据,则拼接一下
    if (result.records && result.records.length) {
      this.data.list = this.data.list.concat(result.records);
      this.data.noMore = false;
    } else {
      if (this.data.list.length) this.data.noMore = true;
      else this.data.noMore = false;
    }
    if (this.data.noMore) {
      this.$msg("没有更多了");
    }
    //更新页面
    this.setData({
      list: this.data.list,
      noMore: this.data.noMore,
    });
  },
  1. 上拉加载更多
  2. 加载列表