微信小程序列表刷新及分页加载。

客官°小女子只卖身不卖艺 2023-02-21 02:27 10阅读 0赞

*  **下拉刷新方法**

onPullDownRefresh: function() { 
      var vm = this;
      vm.setData({ 
    	 houseList: [],
    	 listComponent: { 
    	    page: 1,
    	    count: 0,
    	    loading: false,
    	  },
      })
      vm.getHistoryList();
    },
     JSON:
     "enablePullDownRefresh":true,

*  **列表下拉分页**  
    原理：第一次保存第一页的数据，以后每次都拼接下一页请求的数据，条件：当列表houseList的长度小于数据的总数(后台返回)时，。

onReachBottom: function() { 
       var vm  = this;
       if(vm.data.houseList.length >= vm.data.count) return false;
       vm.getHistoryList();
    },
    
      getHistoryList() {   // 加载分页,此处采用listComponent对象包裹loading,page,size等列表常用变量
        const vm = this; 
        if (vm.data.listComponent.loading) {  //当正在请求时阻止再次请求
          return false
        }
        vm.setData({ 
          'listComponent.loading': true,
        })
    
        let postData = { 
             // "user_id": vm.data.user_id,
          "page_index": vm.data.listComponent.page,
          "page_size": 10
        }
        // 数据请求
        getHistoryList(postData).then(res => { 
            let _houseList = res.list ? res.list : []
            var _list = vm.data.houseList.concat(_houseList);
            vm.setData({ 
              houseList: _list,
              'listComponent.count': + res.count,
              'listComponent.loading': false
            })
            if (res.list.length) {  //当前列表不为空，则设置page为下一页，等待第二次触发。
              var page = vm.data.listComponent.page_index + 1;
              vm.setData({ 
                'listComponent.page': page
              })
            }
          })
      },
      resetData:function(){ 
            var vm = this;
            vm.setData({  //重置数据
              houseList: [],
              listComponent: { 
              page: 1,
              count: 0,
              loading: false,
          },
      })
    },