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

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); // 合并下一页数据
				}
			})
		},
	}
}
相关推荐
xx240626 分钟前
UniApp学习笔记
uni-app
七七小报4 小时前
uniapp-商城-36-shop 购物车 选好了 进行订单确认2 支付方式颜色变化和颜色滤镜filter
uni-app
lh_12544 小时前
uniapp 常用开发技巧与实战指南
uni-app
某公司摸鱼前端5 小时前
uniapp 仿企微左边公司切换页
前端·uni-app·企业微信
WKK_5 小时前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app
晨集5 小时前
Uni-App 多端电子合同开源项目介绍
java·spring boot·uni-app·电子合同
盛夏绽放9 小时前
uni-app中获取用户实时位置完整指南:解决权限报错问题
uni-app·notepad++
xixixin_10 小时前
【uniapp】vue2 搜索文字高亮显示
java·服务器·前端·uni-app·交互·文字高亮
一夜枫林16 小时前
uniapp自定义拖拽排列
前端·javascript·uni-app
良艺呐^O^16 小时前
uniapp实现app自动更新
开发语言·javascript·uni-app