小程序下拉刷新,上拉加载更多

本文介绍了微信小程序中实现下拉刷新和上拉加载更多的基本原理及步骤。下拉刷新通过清空并重新加载data数据实现,上拉加载更多则通过追加新获取的数据到原有数据来完成。在页面json配置中启用下拉刷新功能,并利用onReachBottom页面上拉触底事件处理函数来触发加载更多内容。

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

实现原理:

1、下拉刷新:由于小程序数据是实时渲染的。我们把data{}内的数据清空重新加载即可实现下拉刷新。
2、上拉加载更多(页面上拉触底事件):新获取的数据追加到data{}内的原数据即可。由于小程序数据是实时渲染,小程序在保持原数据显示不变的基础上,自动追加渲染显示新数据。

下拉刷新:首先在我们要使用下拉刷新页面的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]		// 我们让当前的数据和请求来的数据合并成一个数组
				// 我用到的是展开运算符,大概意思就是 把数组中的每一个元素都展开。
			});
		}
	})
  },
})

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值