小程序列表上拉加载更多 + 下拉刷新，一步到位实现

列表页面几乎是小程序标配，今天实现下拉刷新 + 上拉加载更多，代码可直接复制使用。

一、页面配置

{
  "enablePullDownRefresh": true,
  "onReachBottomDistance": 50
}

二、js 逻辑

Page({
  data: {
    list: [],
    page: 1,
    size: 10
  },

  onLoad() {
    this.getList()
  },

  // 获取列表
  async getList() {
    // 这里替换为真实接口
    const res = { data: Array(10).fill(0) }
    this.setData({
      list: this.data.page === 1 ? res.data : [...this.data.list, ...res.data]
    })
  },

  // 下拉刷新
  onPullDownRefresh() {
    this.setData({ page: 1, list: [] })
    this.getList().then(() => wx.stopPullDownRefresh())
  },

  // 上拉加载
  onReachBottom() {
    this.setData({ page: this.data.page + 1 })
    this.getList()
  }
})

总结：配置 + 逻辑分离，结构清晰，适配绝大多数商品列表、资讯列表场景。