【uniApp】实现列表下拉触底加载更多功能

	
		
			
				
{{el.warntime}}   {{el.warninfo}}
（图片来源网络，侵删）
						
		
	
	

export default {
	data() {
		return {
			params: {
				pageNum: 1, // 页码
				pageSize: 10 // 条数
			},
			listData: [], // 当前页列表数据
			// 下拉加载
			allListCount: 0, // 列表总数
			allListData: [], // 列表所有数据
			scrollViewH: 0, // 列表滚动区域
			showLoadMore: false,
			loadStatus: "more",
			contentText: {
				contentdown: '查看更多',
				contentrefresh: '加载中……',
				contentnomore: '已全部加载'
			}
		}
	},
	onLoad() {
		this.getScrollHeight()
		this.getList()
	},
	methods: {
		// 获取屏幕高度
		getScrollHeight() {
			let self = this;
				uni.getSystemInfo({
					success(res) {
						self.scrollViewH = res.windowHeight - 120; // 120为页面中我查询条件高度，根据实现情况调整
					}
				});
		},
		// 滚动到底部显示加载状态
		onReachLower(){
			this.showLoadMore = true
			if(this.listData.length >= this.allListCount){
				this.loadStatus = "noMore"
			}else{
				this.loadStatus = "loading"
				setTimeout(()=>{
					this.params.pageNum ++;
					this.loadMore();
				}, 1000)	
			}		
		},
		// 根据接口获取列表数据，此处为后端分页，可根据实际情况改为前端分页
		getList() {
			this.$api.getDataByAjax(url, 'GET', this.params).then((res)=>{
				if (res.code === 200 && res.data) {
					this.allListCount = res.data.count
					this.listData = res.data
				}
			})
		},
		// 加载更多
		loadMore(){
			this.$api.getDataByAjax(url, 'GET', this.params).then((res)=>{
				if (res.code === 200 && res.data) {
					this.listData = this.listData.concat(res.data); // 合并下一页数据
				}
			})
		},
	}
}