微信小程序下拉触底获取数据

因为数据量很多一下请求对用户体验不是很好所以进行分页请求列表数据,当用户向下刷新快触底时,再进行向后端请求数据.

首先在data里面添加分页的页面.以及一页请求的数据长度

data: {
    // 进行判断是否触底
    isEnd: false,
    pageNum: 1,
    pageSize: 10,
    // 存放数据列表
    dataList: [],
}
 

  // 获取列表数据
  getNewList() {
    wx.request({
      url: 'url地址', 
      data: {
        "pageNum": this.data.pageNum,
        "pageSize": this.data.pageSize,
      },
      method: 'POST',
      header: {
        'content-type': 'application/json' // 默认值
      },
      success (res) {
        // 把后端返回的数据放在newData里面
        const newData = res.data;
        // 如果返回有数据就进行拼接
        if (newData.length > 0) {
            const dataList= this.data.dataList.concat(newData);
            this.setData({
              dataList: dataList,
              pageNum: this.data.pageNum + 1,
            })
         } else {
            // 如果返回结果为空，表示已到达最后一页
            this.setData({
              isEnd: true
            });
         }
      }
    })
  },

    
  onLoad(options) {
    this.getNewList();
  },


  // 页面上拉触底事件的处理函数
  onReachBottom() {
    this.loadMore();
  },


  // 下拉触底获取更多的数据
  loadMore() {
    if (!this.data.isEnd) {
      console.log("触底加载新房");
      this.getNewList();
    }
  },

这样就可以进行分页查询的操作了,每次触底都会进行发起请求加载新的数据(页数是pageNum,每请求一次页数就会加一,请求数据的条数是pageSize都可以自己定义),并把新的数据进行拼接在自己定义的列表(dataList)中.

然后在wxml中就可以写结构和样式进行对数据进行循环展示了.

还可以做一个下拉就把判断触底的值设置为false(虽然不知道这样有没有意义)

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    // 下拉刷新过后设置成未触底 
    this.setData({
      isEnd: false,
    });
    wx.stopPullDownRefresh();
  },

要注意的是开启下拉操作得去相应页面的json文件中开启

{
  "enablePullDownRefresh": true
}