Uniapp scrolling load (one page, multiple lists)

Start with a picture , It's all made up in the back  

Global variables ：

data() {
	return {
		tabIndex: 0,
		faultTabarIndex: 0,
		list: [],
		listMax: 0,// The total number of data lists in the interface 
		showLoadMore: false,// Whether to display the bottom touch prompt 
		pageNo: 1,// Number of pages loaded 
		loadMoreText: ' Loading ...'// Load prompt text 
	}
},

  Load list method , It's easy to understand , Is to change through globally defined identity , And then execute different requests ：

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);
			})
		})
	}
},

Then when the global identity changes , Give Way

list: [],
listMax: 0,// The total number of data lists in the interface 
showLoadMore: false,// Whether to display the bottom touch prompt 
pageNo: 1,// Number of pages loaded 
loadMoreText: ' Loading ...'// Load prompt text 

Set as default ,

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

  Finally, add uniapp The official page scrolls to the bottom of the life cycle , You need to determine whether the length of the page list is equal to the total number of data returned by the interface and change the prompt text . Then add one to the number of pages , Finally, call the get data method .

onReachBottom() {
	this.showLoadMore = true;
	if (this.list.length == this.listMax) {
		this.loadMoreText = ' No more data ！'
		return;
	}
	++this.pageNo;
	this.getList();
}

Add prompt text under the list

<view class="uni-loadmore" v-if="showLoadMore">{
   {loadMoreText}}</view>