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

下拉刷新首页数据：

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

1. 首先需要在页面对应的 JSON 文件中配置 "enablePullDownRefresh": true。
2. 然后在页面对应的 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() // 停止刷新
       	})
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15

使用 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.data
	io.getList({pageNum, pageSize})
		.then(({data}) => {
			this.setData({list: data})
	    })
	    .finally(() => {
	    	this.setData({isPulldownRefresh: false})  // 设置当前下拉刷新状态
	    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

上拉加载下一页数据：

使用页面的滚动条上拉，加载下一页数据：

1. 在页面对应的 JSON 文件中设置 "onReachBottomDistance":50 触发距离。
2. 然后在页面对应的 JS 文件中使用微信小程序提供的 onReachBottom() {} 监听上拉触底事件。

   // 	本质是获取下一页的数据并且和当前的数据合并
   onReachBottom(){
   		const {pageNum, totalPage} = this.data
          // 判断到是最后一页，则停止刷新
          if(pageNum+1 > totalPage) return
   		
   		// 获取下一页数据
   		this.setData({pageNum: pageNum+1},  this.getList)
   },	
   getList(){
       const {pageNum, pageSize, list} = this.data
   	io.getList({pageNum, pageSize}).then(({data, pages}) => {
   		   this.setData({
   			    list: list.concat(data), // 获取到的数据和当前的数据合并
   			    totalPage: pages,
   		  })
       })
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18

使用 scroll-view 的滚动条上拉，加载下一页数据：

<scroll-view scroll-y="true" bindscrolltolower="handleReachBottom">

// 	本质是获取下一页的数据并且和当前的数据合并
handleReachBottom(){
	const {pageNum, totalPage} = this.data
	// 判断到是最后一页，则停止刷新
	if(pageNum+1 > totalPage) return
			
	// 获取下一页数据
	this.setData({pageNum: pageNum+1},  this.getList)
},
getList(){
	const {pageNum, pageSize, list} = this.data
     io.getList({pageNum, pageSize}).then(({data, pages}) => {
		this.setData({
			list: list.concat(data), // 获取到的数据和当前的数据合并
			totalPage: pages,
	    })
	})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

切换页面，可能会出现 scroll-view 滚动条没有回到顶部的情况。
原因：之前的页面可能是未被销毁，仍然在页面栈中，因此切换回来之后还保持之前的状态。
解决方法：切换回来页面之后，首先清空 scroll-view 的数据即可。