微信小程序-下拉刷新上拉分页加载

小程序中自带方法:分别为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)
    })
  },

如果用的在组件,可以直接在组件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)
    }) 
  },

 

你可能感兴趣的:(微信小程序)