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

心酱儿2024-07-15 0:32

html 复制代码

<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>

javascript 复制代码

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