小程序中的下拉刷新、上拉加载更多

紫冰花飘

于 2021-05-14 17:25:46 发布

阅读量431

点赞数

分类专栏：小程序文章标签：小程序

本文链接：https://blog.csdn.net/weixin_57994974/article/details/116797158

版权

小程序专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文详细介绍了微信小程序中如何实现下拉刷新和上拉加载更多的功能。下拉刷新通过开启`enablePullDownRefresh`并监听`onPullDownRefresh`事件来重新请求第一页数据。上拉加载更多则利用`onReachBottom`事件，在用户滚动到底部时请求下一页数据，并将新数据与原有数据合并。示例代码展示了具体的实现过程。

摘要由CSDN通过智能技术生成

下拉刷新

思路：我们小程序有封装好的下拉动作，开启后，在使用小程序内置的监听用户下拉动作的函数，在里面重新请求第一页的数据
首先在我们要使用下拉刷新页面的json配置中写入

"enablePullDownRefresh":true,    // 开启下拉刷新
"backgroundTextStyle":"dark"	// 改变刷新时出现的样式，默认是白色。

然后在我们的开启下拉刷新的页面就可以下拉了。

onPullDownRefresh:function(){   // onPullDownRefresh 专门用来监听用户的下拉动作
			wx.request({			// 用户下拉后我们重新请求一次
			url:'https://wwwaksdha',
			data:{pagenum:1,pagesize:10},// 发送的参数		请求第一页的数据	每页10条数据
			method:'get',			// 请求方式
			success(res){
				this.setData({
				list:res.data.list // 我们重新赋值，让他渲染页面
				})
			}
		})
}

上拉加载更多

思路：当我们滚动条到底部的时候，我们就去请求下一页的数据，然后把请求过来的数据和原数据进行一个合并。
首先我们要知道一个小程序的内置函数，页面上拉触底事件的处理函数 onReachBottom

page({
	data:{
		pagenum:1,
		pagesize:10,
		list:[]
	},
onReachBottom: function () {		 // 当我们滚动条到底触发的函数
	let oneself = this;		// 因为下边在一个函数中，他的this指向是改变的。
   		wx.request({		// 重新发送请求
		url:'https://ashdkas',			// 请求路径
		data:{pagenum:this.data.pagenum,pagesize:this.pagesize},		// 请求参数  pagenum是当前页
		method:'get',			 // 请求方式
		success(res){			// 成功回调
			oneself.setData({			// 修改数据
				list:[...oneself.data.list,...res.data.list]		// 我们让当前的数据和请求来的数据合并成一个数组
				// 我用到的是展开运算符，大概意思就是 把数组中的每一个元素都展开。
			});
		}
	})
  },
})

如有不解之处，请留言评论
如有更好的方法，请提出。