uniapp ---- 添加分页

在这里插入图片描述

添加分页

<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();
	}
},
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
UniApp 中,你可以使用 `scroll-view` 和一些计算逻辑来实现分页效果。下面是一个简单的示例: ```html <template> <view class="container"> <scroll-view scroll-y="true" @scrolltolower="loadMore"> <view class="content"> <!-- 显示当前页的内容 --> <view v-for="item in currentPageData" :key="item.id">{{ item.content }}</view> </view> </scroll-view> </view> </template> <script> export default { data() { return { currentPage: 1, // 当前页码 pageSize: 10, // 每页显示的数量 totalData: [], // 所有数据 }; }, computed: { // 根据当前页码和每页显示的数量计算当前页的数据 currentPageData() { const start = (this.currentPage - 1) * this.pageSize; const end = start + this.pageSize; return this.totalData.slice(start, end); }, }, methods: { // 模拟异步加载更多数据 loadMore() { this.currentPage++; // 请求数据并将新数据添加到 totalData 中 // ... }, }, }; </script> <style> .container { height: 100vh; overflow: hidden; } .content { padding: 10px; } </style> ``` 在上面的示例中,我们使用了 `scroll-view` 组件来实现垂直滚动,并监听了 `scrolltolower` 事件来触发加载更多数据的逻辑。`totalData` 数组保存了所有的数据,通过 `currentPage` 和 `pageSize` 计算出当前页的数据并在页面中显示。当滚动到底部时,`loadMore` 方法会更新 `currentPage` 的值,并请求新的数据,然后将新数据添加到 `totalData` 中。 这只是一个简单的示例,你可以根据自己的需求进行相应的调整和扩展。希望能对你有帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

悠闲的线程池

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值