微信小程序-下拉刷新上拉分页加载_onpulldownrefresh: function ()-优快云博客

本文链接：https://blog.youkuaiyun.com/ChibiMarukoChan/article/details/85286008

本文介绍小程序中如何实现下拉刷新和上拉加载更多功能，包括在.json文件中配置enablePullDownRefresh，使用onPullDownRefresh和onReachBottom方法，以及在scroll-view组件中设置searchScrolltoupper和searchScrollLower。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序中自带方法：分别为onPullDownRefresh和onReachBottom

具体操作如下：

必须先在对应的页面的.json文件中，启用下拉刷新，设置enablePullDownRefresh为true

{
"enablePullDownRefresh": true
}

data:{
  searchPageNum:1
},

/*页面相关事件处理函数--监听用户下拉动作*/
  onPullDownRefresh: function () {
   //通过监听onPullDownRefresh，先对data中的数据进行初始化，然后请求接口
   //当处理完数据刷新后，在请求的complete方法中：wx.stopPullDownRefresh()可以停止当前页面的下拉刷新
  },

  /**页面上拉触底事件的处理函*/
  onReachBottom: function () {
    let that=this
    that.setData({
      searchPageNum: that.data.searchPageNum + 1, //每次触发上拉事件，把searchPageNum+1  
    });
    //调用分页查询数据的方法，返回新一页的数据为res
    //当处理完数据刷新后，在请求的complete方法中：wx.stopPullDownRefresh()可以停止当前页面的下拉刷新
    //实现加载分页数据
    that.setData({
        data:that.data.oldData.concat(res)
    })
  },

如果用的在<scroll-view>组件，可以直接在组件l里设定searchScrolltoupper和searchScrollLower实现

data:{
    searchPageNum:1
}
searchScrollLower: function () {
    let that = this;
    that.setData({
      searchPageNum: that.data.searchPageNum + 1, //每次触发上拉事件，把searchPageNum+1  
    });
    //concat把新查询的数据(res)拼接到原来的数据(that.data.oldData)上
    that.setData({
        data:that.data.oldData.concat(res)
    }) 
  },