uni-app 实现下拉刷新和上拉加载

移动端，列表页的下拉刷新和上拉加载是非常常见的功能，本文介绍了使用 uni-app 时，如何实现此功能。

基础配置

uni-app 中定义了 onPullDownRefresh 和 onReachBottom 处理函数，分别用于监听该页面用户下拉刷新事件和上拉加载事件。（这两个处理函数和onLoad等生命周期函数同级）但是如果要使用这两个函数，首先需要在 page.json 文件中配置 enablePullDownRefresh 为 true，假设需要在 list 页面中使用这两个函数，配置内容如下：

"pages": [
	{
		"path": "pages/list/list",
		"style": {
			"enablePullDownRefresh": true
		}
	}
]

具体实现

在列表页中，下拉刷新其实就是加载第一页的数据；上拉加载就是加载下一页的数据。所以如果已经存在一个加载数据的函数，下拉刷新时，指定加载页面为第一页；上拉加载时，指定加载页面为下一页即可。所以我们首先实现加载数据的函数。

需要使用到的响应式数据：

data() {
	return {
		list: [], // 列表数据
        count: 0, // 列表数据总数
		currPage: 1, // 当前加载页数
		loading: true, // 是否正在加载数据
		finished: false, // 是否已加载所有数据
		listTip: '上拉获取更多数据' // 提示文字
	}
},

加载数据函数实现：

queryList () {
	let params = {
		pageSize: 10,
		pageNo: this.currPage
	}
	this.loading = true
	this.listTip = '数据加载中...'
	service.getList(params).then(res => {
		uni.stopPullDownRefresh()
		this.loading = false
		this.count = res.total
		this.list = this.list.concat(res.list)
		if (this.list.length === this.count) {
			this.finished = true
			this.listTip = '已没有更多数据'
		} else {
			this.listTip = '上拉获取更多数据'
		}
	}).catch(err => {
		uni.stopPullDownRefresh()
		this.loading = false
		this.listTip = '数据获取失败，请刷新页面'
	})
}

下拉刷新函数实现：

onPullDownRefresh: function() {
	console.log('下拉刷新')
	this.initListData()
	this.queryList()
},

initListData () {
	this.list = []
	this.currPage = 1
	this.loading = true
	this.finished = false
    this.listTip = '数据加载中...'
},

上拉加载函数实现：

onReachBottom: function() {
	console.log('上拉加载')
	if (this.finished) {
		return
	}
	this.currPage++
	this.queryList()
}

完整代码：

<script>
	import service from '@api/service.js'
	export default {
		name: 'list',
		data() {
			return {
				list: [],
                count: 0,
				currPage: 1,
				loading: true,
				finished: false,
				listTip: '上拉获取更多数据'
			}
		},
        created(){
			this.initListData()
			this.queryList()
		},
		methods: {
			initListData () {
				this.list = []
				this.currPage = 1
				this.loading = true
				this.finished = false
                this.listTip = '数据加载中...'
			},
			queryList () {
				let params = {
					pageSize: 10,
					pageNo: this.currPage
				}
				this.loading = true
				this.listTip = '数据加载中...'
				service.getList(params).then(res => {
					uni.stopPullDownRefresh()
					this.loading = false
					this.count = res.total
					this.list = this.list.concat(res.list)
					if (this.list.length === this.count) {
						this.finished = true
						this.listTip = '已没有更多数据'
					} else {
						this.listTip = '上拉获取更多数据'
					}
				}).catch(err => {
					console.log(err)
					uni.stopPullDownRefresh()
					this.loading = false
					this.listTip = '数据获取失败，请刷新页面'
				})
			}
		},
		onPullDownRefresh: function() {
			console.log('下拉刷新')
			this.initListData()
			this.queryList()
		},
		onReachBottom: function() {
			console.log('上拉加载')
			if (this.finished) {
				return
			}
			this.currPage++
			this.queryList()
		}
	}
</script>

至此，下拉刷新和上拉加载就完成了。