uni-app分页实现上拉加载

最新推荐文章于 2024-09-15 00:41:42 发布

金刚镜

最新推荐文章于 2024-09-15 00:41:42 发布

阅读量1.4k

点赞数 1

分类专栏： uni-app列表分页

本文链接：https://blog.csdn.net/qq_35323539/article/details/126698219

版权

uni-app 分页滚动加载 onPullDownRefresh onReachBottom

关键词由CSDN通过智能技术生成

uni-app列表分页专栏收录该内容

1 篇文章 0 订阅

订阅专栏

uni-app 列表进行分页，上拉的时候加载下一页，需要页面支持滚动，不适用scroll-view

<template>
	<view>
		<view class="item" v-for="(item,index) in list" :key="index">

		</view>
		<view class="loadingText">{{loadingText}}</view>
		<view v-if="list.length === 0" >
			<image class="nobodyImage" :src="'../../static/image/noBody.png'"></image>
			<view class="nobodyText">暂无记录~</view>
		</view>
	</view>
</template>

<script>
	import request from '@/common/request'
	export default {
		data() {
			return {
				page: {
					current: 1,
					size: 10,
					total: 0,
				},
				loadingText: '',
				list: []
			}
		},
		onLoad: function(option) {
			this.page.current = 1
			this.selectList()
		},
		onPullDownRefresh() {
			this.page.current = 1
			this.selectList()
		},
		onReachBottom() {
			this.getMoreList();
		},
		methods: {
			getMoreList() {
				this.loadingText = '-- 正在加载 --'
				request.get('/history/page', {
					current: this.page.current,
					pageSize: this.page.size,
				}).then(res => {

					if (res.data.list.length == 0 || res.data.list == null) {
						this.loadingText = '-- 暂无更多 --'
						return false;
					}
					var newlist = res.data.list;
					this.list = this.list.concat(newlist)
					this.page.current++;

				});
			},
			selectList() {
				request.get('/history/page', {
					current: this.page.current,
					pageSize: this.page.size,
				}).then(response => {
					this.list = response.data.list;
					this.page.total = response.data.total;
					uni.stopPullDownRefresh()
					this.page.current++;
				});
			}
		}
	}
</script>
<style>
	page {
		background-color: #F1F1F1;

	}
</style>
<style>
	.item {
		display: flex;
		flex-direction: column;
		background-color: white;
		margin-top: 32rpx;
		padding: 16rpx;
	}

	.loadingText {
		padding: 20rpx 0 40rpx 0;
		text-align: center;
		color: #310D05;
		font-size: 28rpx;
	}

	.nobodyImage {
		width: 557rpx;
		height: 300rpx;
		margin-left: 104rpx;
	}

	.nobodyText {
		font-size: 40rpx;
		color: #666666;
		text-align: center;
		margin-top: 63rpx;

	}
</style>