1. 分页加载的应用场景

分页加载功能在数据量大的应用中非常常见，比如QQ、微博、新闻类应用。这种功能既能应对大数据量的展示需求，又能提升用户体验。微信小程序中同样可以实现分页加载数据，下面我们就来详细介绍实现方法。

2. 分页加载的实现原理

实现分页加载功能的核心在于请求数据时带上分页参数。主要有两种方式：

页码+页大小：请求时传递当前页码和每页显示数量

偏移量：请求时传递开始和结束位置（如第一页0-9，第二页10-19）

3. 关键事件处理

微信小程序已经封装好了上拉和下拉的触发事件：

onPullDownRefresh：下拉刷新

onReachBottom：上拉加载更多

新手常遇到的问题是重写了事件函数却不起作用。这是因为除了重写函数，还需要在.json配置文件中添加：

{
  "enablePullDownRefresh": true
}
这样才能确保上拉和下拉操作能正确触发对应函数。
5. 数据初始化
在Page的data中需要定义以下关键数据：
data: {
  list: [],  // 数据列表
  page: 1,   // 当前页码
  pageSize: 10, // 每页大小
  hasMore: true // 是否还有更多数据
}

6. 数据加载逻辑

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh:function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},

网络请求成功后需要处理以下逻辑：

如果返回数据量小于pageSize，设置hasMore为false

如果返回数据量等于pageSize，设置hasMore为true并将page+1

下拉刷新时将page重置为1，直接替换list数据

上拉加载时将新数据追加到list后面

7. 核心代码实现

{
enablePullDownRefresh: true
}

以下是获取数据的函数示例：

loadData(loadingText) {
  wx.showLoading({ title: loadingText })
  request({
    url: 'api/list',
    data: { page: this.data.page, size: this.data.pageSize }
  }).then(res => {

    const hasMore = res.data.length >= this.data.pageSize
    this.setData({
      list: this.data.page === 1 ? res.data : [...this.data.list, ...res.data],
      hasMore,
      page: hasMore ? this.data.page + 1 : this.data.page
    })
    wx.hideLoading()
  })
}

8. 页面生命周期

在页面onLoad中首次加载数据：

data: {
page: 1,
pageSize: 30,
hasMoreData: true,
contentlist: [],
},

onLoad() {

this.loadData('加载中...')

}

9. 事件函数实现

下拉刷新和上拉加载的实现：

onPullDownRefresh() {

this.setData({ page: 1 })

this.loadData('刷新中...').finally(() => {

wx.stopPullDownRefresh()

})

getMusicInfo: function (message) {
var that = this
var data = {
showapi_appid:\'25158\',
showapi_sign:\'c0d685445898438f8c12ee8e93c2ee74\',
keyword: \'我\',
page:that.data.page
}
network.requestLoading(\'https://route.showapi.com/213-1\', data, message,function (res) {
console.log(res)
var contentlistTem= that.data.contentlist
if(res.showapi_res_code == 0) {
if(that.data.page == 1) {
contentlistTem= []
}
var contentlist =res.showapi_res_body.pagebean.contentlist
if(contentlist.length < that.data.pageSize) {
that.setData({
contentlist:contentlistTem.concat(contentlist),
hasMoreData:false
})
} else {
that.setData({
contentlist:contentlistTem.concat(contentlist),
hasMoreData:true,
page:that.data.page + 1
})
}
} else {
wx.showToast({
title: res.showapi_res_error,
})
}
}, function (res) {
wx.showToast({
title: \'加载数据失败\',
})
})
},

}

onReachBottom() {

if (this.data.hasMore) {

this.loadData('加载更多...')

`

10. 注意事项

onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
var that = this
that.getMusicInfo(\'正在加载数据...\')
},

分页功能能更好地展示内容，提升用户体验。但在实现时要注意：

正确处理分页参数

确保数据加载的连续性

避免重复请求

处理好边界情况（如无更多数据）

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh:function () {
this.data.page = 1
this.getMusicInfo(\'正在刷新数据\')
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
if(this.data.hasMoreData) {
this.getMusicInfo(\'加载更多数据\')
} else {
wx.showToast({
title: \'没有更多数据\',
})
}
},

分页加载功能虽然看似简单，但如果处理不当可能导致数据丢失或显示异常。建议在实际开发中做好测试，确保功能的稳定性。对于更复杂的应用场景，还可以考虑加入虚拟滚动等优化方案。