小程序实战(三)-分页加载

实战 › 小程序

一、需求说明

  1. 默认只展示一页内容
  2. 用户可上滑加载下一页内容
  3. 当加载了两页及以上内容时，有返回顶部功能

二、需求实现

这个需求，主要使用小程序的 onReachBottom 函数。
用户在上滑时，可以触发到这个函数，进行数据获取

2.1 获取数据函数实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
data: {
	list: [],
	page: 1,
	pageSum: '0'
},
getList() {
	api.getList({page: this.data.page}).then(res => {
		let list
		if (this.data.page == 1) {
			// 若请求第一页，则直接赋值
			list = res.list
		} else {
			// 否则将获取的数据与原数组合并
			list = this.data.list.concat(res.list)
		}
		this.setData({
			list: list
		})
	})
}

2.2 上滑动作触发函数实现

1
2
3
4
5
6
7
8
9
onReachBottom() {
	if (this.data. page + 1 <= this.data.pageSum) {
		// 若不是最后一页，则将当前页数增加1，获取数据
		this.setData({
			page: this.data.page + 1
		})
		this.getList()
	}
}

2.3 回到顶部函数实现

  1. 是否显示 回到顶部 按钮：
1
2
3
4
5
6
7
8
9
// 是否显示
data: {
	isShowToTop: false
},
onPageScroll(e) {
	this.setData({
		isShowToTop: e.scrollTop > 500
	})
}
  1. 回到顶部 函数实现：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
toToP() {
	if (wx.pageScrollTo) {
		wx.pageScrollTo({
			scrollTop: 0
		})
		this.setData({
			isShowToTop: false
		})
	} else {
		wx.showModal({
			title: '提示',
			content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
		})
	}
}