小程序实现自动加载的完整代码

小程序实现自动加载的完整代码

1. 实现原理

小程序实现自动加载，主要是通过onReachBottom事件来实现的。当页面滚动到底部时，会触发onReachBottom事件，我们可以在这个事件里面去加载下一页的数据。

Page({

  data: {
    pageNum: 1, // 当前页数
    pageSize: 20, // 每页条数
    dataList: [], // 数据列表
  },
  // 页面下拉触底事件
  onReachBottom: function() {
    this.setData({
      pageNum: this.data.pageNum + 1 // 当前页数加1
    })
    this.loadData() // 加载数据
  },
  // 加载数据
  loadData: function() {
    // 发送请求获取数据
    wx.request({
      url: 'http://xxx.xxx.xxx.xxx/api/getDataList',
      data: {
        pageNum: this.data.pageNum,
        pageSize: this.data.pageSize,
      },
      success: res => {
        // 数据处理
        let dataList = this.data.dataList.concat(res.data.dataList)
        this.setData({
          dataList: dataList
        })
      }
    })
  }
})

2. 代码解析

上面的代码实现了下拉到底部自动加载下一页的功能。让我们来逐行解析一下：

Page({

  data: {
    pageNum: 1, // 当前页数
    pageSize: 20, // 每页条数
    dataList: [], // 数据列表
  },

在data中定义了三个初始值分别为：当前页数1，每页条数20和数据列表为空数组。

// 页面下拉触底事件

  onReachBottom: function() {
    this.setData({
      pageNum: this.data.pageNum + 1 // 当前页数加1
    })
    this.loadData() // 加载数据
  },

当页面触底时，会触发onReachBottom事件。我们在该事件中给pageNum赋值并调用loadData方法。

// 加载数据

  loadData: function() {
    // 发送请求获取数据
    wx.request({
      url: 'http://xxx.xxx.xxx.xxx/api/getDataList',
      data: {
        pageNum: this.data.pageNum,
        pageSize: this.data.pageSize,
      },
      success: res => {
        // 数据处理
        let dataList = this.data.dataList.concat(res.data.dataList)
        this.setData({
          dataList: dataList
        })
      }
    })
  }
})

loadData方法中，发送请求获取下一页的数据。同时，给pageNum赋值，将获取到的数据拼接到之前的数据列表中。最后通过setData将更新后的数据列表保存。

3. 注意事项

在使用onReachBottom事件时，需要注意以下几点：

不要频繁请求数据

由于下拉到底部触发onReachBottom事件是比较频繁的，因此在请求数据时需要设置一定的延时，避免频繁请求数据。

不要一次性加载过多数据

在加载数据时，应设置每页条数，避免一次性加载过多数据，导致页面卡顿。

页面滚动时需要考虑性能问题

在页面滚动时，浏览器会不断触发scroll事件，这会影响页面的性能。因此建议使用scroll事件的防抖（debounce）或截流（throttle）策略，避免频繁触发scroll事件。

4. 总结

通过以上代码实现，实现了小程序自动加载的功能。在实现自动加载时，需要注意上面提到的几个点，避免出现页面卡顿等问题。