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

<scroll-view :style="'height:' + scrollViewH + 'px;'"  	scroll-y="true"  	@scrolltolower="onReachLower"> 	<uni-collapse ref="collapse" v-model="value" v-for="el in listData" :key="el.id"> 		<uni-collapse-item :title="el.stationname" titleBorder="none"> 			<view class="info-content" @click="showInfo(el)"> 				<p>{{el.warntime}} &nbsp;&nbsp;{{el.warninfo}}</p> 			</view>			 		</uni-collapse-item> 	</uni-collapse> 	<uni-load-more v-if="showLoadMore" :status="loadStatus" :content-text="contentText"></uni-load-more> </scroll-view> 

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); // 合并下一页数据 				} 			}) 		}, 	} }