uni-app的滚动加载 uni-load-more组件使用

手机端的滚动加载其实就是PC端的分页,触底之后页数加一调用接口,将返回的数据连接在原来的数据后面,就大致完成了。
使用组件
https://ext.dcloud.net.cn/plugin?id=29

<uni-load-more :status="loadmore":contentText="contentText"></uni-load-more>
export default {
	data() {
		return {
			ifBottomRefresh:false,
			loadmore: 'more',
			contentText: {
				"contentdown": "加载更多数据",
				"contentrefresh": "加载中...",
				"contentnomore": "暂无更多数据。"
			},
			current: 1,
			size: 10,
			tableData:[]
		}
	},
	onReachBottom() {
		// console.log('触底')	
		this.current += 1
		// 没有更多数据之后 就不会在触底加载
		if (this.loadmore == 'noMore') return
		this.ifBottomRefresh = true
		this.getData() // 触底 拉取数据
	},
	created(){
		this.getData()
	},
	methods:{
	getData() {
		const params = {
			size: this.size,
			current: this.current
		}
		recommendList(params).then(res => {// 从接口里拿数据 使用时 换成自己的
		//判断是触底加载还是第一次进入页面的加载
			if (this.ifBottomRefresh) {
				this.tableData= this.tableData.concat(res.content.records)
			} else {
				this.tableData= res.content.records
			}
			this.ifBottomRefresh = false
			this.loadmore = this.tableData.length < res.content.total ? 'more' : 'noMore'
			})
		},
	}
}

你可能感兴趣的:(uni-app的滚动加载 uni-load-more组件使用)