微信小程序上划加载下划刷新

最新推荐文章于 2025-03-13 09:51:25 发布

原创最新推荐文章于 2025-03-13 09:51:25 发布 · 639 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

微信小程序专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了在小程序中实现上划加载更多数据和下划刷新功能的方法。通过调整offset和limit参数，可以有效地控制数据的加载数量和刷新时机，提升用户体验。

获取列表

data: {
	limit: 20,//每次获取的条数
	offset: 0,//偏移量（从第几条获取）
	total: 0,//列表总数
	list: [],//列表
},
getList: function(limit, offset){
	wx.stopPullDownRefresh();//停止当前页面下拉刷新
	//省略获取接口的过程，接口返回值为resTotal,resList
	this.setData({
		total: resTotal,
		list: this.data.list.concat(resList)
	})
},

上划加载

onReachBottom: function() {
    if (this.data.list.length < this.data.total) {
      this.setData({
        offset: this.data.limit + this.data.offset
      })
      this.getList(this.data.limit, this.data.offset);
    }
  }

下划刷新

需在当前页面的json文件设置 “enablePullDownRefresh”: true

onPullDownRefresh: function() {
	this.setData({
        list: [],
        offset: 0
      })
      this.getList(this.data.limit, this.data.offset);
  },