uniapp ---- 添加分页

最新推荐文章于 2024-04-10 17:55:50 发布

悠闲的线程池

最新推荐文章于 2024-04-10 17:55:50 发布

阅读量704

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_44235759/article/details/120989503

版权

uniapp 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

本文档展示了如何使用Vue.js框架构建一个盘点任务页面，包括设置页面头部、卡片组件、加载更多和返回顶部功能。在页面加载时初始化列表，并在滚动到底部时动态加载更多数据。同时，详细说明了页面滚动事件和触底事件的处理方法。

摘要由CSDN通过智能技术生成

在这里插入图片描述

添加分页

<view>
		<u-navbar :is-back="false" title="盘点任务" :background="{ backgroundColor: '#007AFF'}" title-color="#fff">
		</u-navbar>
		
		<rt-card2 :data="dataList" @cardClick="cardClick">
			<u-button :customStyle="btnCustomStyle" slot="h-right" type="primary" :plain="true" size="mini">提交
			</u-button>
		</rt-card2>
		
		添加如下组件
		<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>

添加如下数据变量
		data() {
			return {
				pageNum:0,//页面号
				pageSize:4,//每页数据量
				scrollTop:0,//滚动的距离
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '上拉加载更多',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
		}

页面加载时清空列表，再加载列表
		onLoad(option) {
			console.log('盘点任务 onload start');
			//初始化列表
			this.dataList.result =[];
			console.log(this.dataList.result);
			this.getDataList();
		},

methods: {
	getDataList() {
		let that = this;
		let eiInfo = new this.$IPLAT.EiInfo();
		let loginCode = "WZB002"
		eiInfo.set("loginCode", loginCode); //用户工号
		eiInfo.set('limit', this.pageSize); //页面加载的数量
		eiInfo.set('offset', this.pageNum * this.pageSize);//起始页面偏移量
		this.$api.query_inventory_task_list(eiInfo).then(res => {
			let datas = res.getBlock('list').getMappedRows();
			if (datas && datas.length > 0) {
			//如果 请求回来的数据 小于了 一个页面的数量，说明后面没有了修改对应的状态
				this.status = datas.length < this.pageSize ? 'nomore' : 'loadmore';
					this.dataList.result.push(...datas);
			} else {
				this.status = 'nomore'
			}
		}).catch(err => {
			console.error(err);
		});
	}
},

添加屏幕滚动事件，以及触底事件

onPageScroll(e) {
	this.scrollTop = e.scrollTop
},
onReachBottom() {
	if (this.status === 'loadmore') {
		this.status = 'loading';
		this.pageNum += 1;
		this.getDataList();
	}
},