uniapp滚动加载(一个页面，多个列表)

Posted 2021-08-30 GHUIJS

开局一张图，后面全靠编 

全局变量：

data() {
	return {
		tabIndex: 0,
		faultTabarIndex: 0,
		list: [],
		listMax: 0,//接口中数据列表总数
		showLoadMore: false,//是否显示触底提示信息
		pageNo: 1,//加载的页数
		loadMoreText: '加载中...'//加载提示文字
	}
},

 加载列表方法，这个很好理解，就是通过全局定义的标识改变，进而去执行不同的请求：

getList() {
	if (this.tabIndex === 0) {
		this.$http.get('/agent/media/getWarnHouses', {
			pageNo: this.pageNo,
			pageSize: 5
		}).then(_ => {
			this.listMax = _.data.page.count;
			_.data.page.list.forEach(item => {
				this.list.push(item);
			})
		})
	} else if (this.tabIndex === 1) {
		this.$http.get('/agent/media/getBackFaults', {
			status: this.faultTabarIndex + 1,
			pageNo: this.pageNo,
			pageSize: 5
		}).then(_ => {
			this.listMax = _.data.page.count;
			_.data.page.list.forEach(item => {
				this.list.push(item);
			})
		})
	} else {
		this.$http.get('/agent/media/getWareDelivery', {
			pageNo: this.pageNo,
			pageSize: 2
		}).then(_ => {
			this.listMax = _.data.page.count;
			_.data.page.list.forEach(item => {
				this.list.push(item);
			})
		})
	}
},

然后就是全局标识改变时，让

list: [],
listMax: 0,//接口中数据列表总数
showLoadMore: false,//是否显示触底提示信息
pageNo: 1,//加载的页数
loadMoreText: '加载中...'//加载提示文字

置为默认，

tabChange(index){
	this.tabIndex = index;
	this.loadMoreText = '加载中...';
	this.pageNo = 1;
	this.list = [];
	this.showLoadMore = false;
	if(index === 1){
		this.faultTabarIndex = 0;
	}
	this.getList();
},

 最后就是添加uniapp官方提供的页面滚动触底的生命周期，需要判断页面列表长度和接口返回的数据总条数是否相等而改变提示文字。然后让页数加一，最后调用获取数据方法。

onReachBottom() {
	this.showLoadMore = true;
	if (this.list.length == this.listMax) {
		this.loadMoreText = '没有更多数据了！'
		return;
	}
	++this.pageNo;
	this.getList();
}