526互联

下拉刷新、上拉加载更多

发布时间 2023-10-09 17:11:13作者: songxia777

wxml结构

 <pulltorefresh-view class="groupScroll" nomore="{{nomore}}" refreshing="{{refreshing}}" bindpulldownrefresh="refreshData" bindloadmore="loadmoreData">
    <!-- 帖子列表数据展示 -->
  </pulltorefresh-view>

下拉刷新、上拉加载更多

1. 定义data

    data: {
      nomore: false,
      refreshing: false,
      currentPageNum: 0,
      perPageNum: 10,
      groupList: [], //帖子列表
    }

2. 获取帖子列表方法

  //获取帖子列表
    getGroupList(gameid) {
      const _this = this
      groupContentService.getPostList(gameid).then(res => {
        if (res && res.success) {
          wx.showToast({
            title: '成功',
          })
          _this.setData({
            groupList: res.data.aaData, //赋值帖子列表
            refreshing: false,
            nomore: false
          })
        } else {
          wx.showModal({
            title: '错误提示',
            content: res.reason,
            showCancel: false
          })
        }
      })
    },

3. 下拉刷新方法

    refreshData: function() {
      this.setData({
        refreshing: true,
        perPageNum: 10,
        currentPageNum: 0,
        groupList: [] //清空帖子列表
      });
      //重新获取帖子列表
      this.getGroupList({
        "gameid": this.data.gameId
      });
    },

4. 上拉加载更多

    loadmoreData: function() {
      this.setData({
        refreshing: true,
        currentPageNum: this.data.currentPageNum + 1
      });
      //重新获取帖子列表
      this.getGroupList({
        "gameid": this.data.gameId
      });
    },