微信小程序实现下拉刷新首页数据、上拉加载下一页数据

原创

已于 2025-02-03 20:00:52 修改 · 5.1k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

于 2020-02-27 16:58:05 首次发布

本文详细介绍了在微信小程序中实现下拉刷新和上拉加载更多数据的方法。包括配置JSON文件启用下拉刷新，使用onPullDownRefresh监听及scroll-view组件，以及通过onReachBottom监听和scroll-view的bindscrolltolower事件实现上拉加载。

下拉刷新首页数据：

使用页面的下拉，刷新首页数据：

首先需要在页面对应的 JSON 文件中配置 "enablePullDownRefresh": true。

然后在页面对应的 JS 文件中使用微信小程序提供的 onPullDownRefresh() {} 监听用户下拉动作。

// 本质是获取首页的数据
onPullDownRefresh(){
		this.setData({pageNum: 1}, this.getList)
},

getList(){
	const {pageNum, pageSize} = this.data
	io.getList({pageNum, pageSize})
		.then(({data}) => {
			this.setData({list: data})
    	})
    	.finally(() => {
    		wx.stopPullDownRefresh() // 停止刷新
    	})
}

使用 `scroll-view` 的下拉，刷新首页数据：

<scroll-view refresher-enabled="true" bindrefresherrefresh="hanndlePullDownRefresh" refresher-triggered="{
  
  {isPulldownRefresh}}"></scroll-view>

data:{
	isPulldownRefresh: false,
},
// 本质是获取首页的数据
hanndlePullDownRefresh(){
	this.setData({pageNum: 1}, this.getList)
 },
 getList(){
	const {pageNum, pageSize} = this.da