uniapp中scroll-view 滚动下一页

原创已于 2023-04-28 20:55:26 修改 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #前端 #javascript

于 2023-01-05 11:26:48 首次发布

该文章展示了一个基于Vue.js编写的自定义分页组件，用于处理列表数据的滚动加载。组件包含了属性如页面大小、加载状态和提示文本，并在用户滚动到底部时触发加载更多数据的事件。在实际应用中，这个组件可以结合后端接口动态加载数据，实现无限滚动的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

插件

<template>
	<view class="componentsContent">
		<scroll-view scroll-y="true" @scrolltolower="nextPage">
			<view class="self-list">
				<slot></slot>
				<view v-if="showTipsText" class="listMore" @click="nextPage()">
					<u-loadmore :status="listLoading" :load-text="loadText"></u-loadmore>
				</view>
				<view class="noneBlock" v-if="!showTipsText"></view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			page: {
				type: Number,
				default: 1
			},
			limit: {
				type: Number,
				default: 20
			},
			listLoading: {
				required: true,
				type: String
			},
			showTipsText: {
				type: Boolean,
				default: true
			},
			loadText: {
				type: Object,
				default: () => ({
					// loadmore: '请点击或轻轻上拉加载数据',
					loadmore: '点击加载数据',
					loading: '努力加载中',
					nomore: '没有更多了'
				})
			}
		},
		computed: {
			currentPage: {
				get() {
					return this.page
				},
				set(val) {
					this.$emit('update:page', val)
				}
			},
			pageSize: {
				get() {
					return this.limit
				},
				set(val) {
					this.$emit('update:limit', val)
				}
			}
		},
		methods: {
			nextPage() {
				if(this.listLoading === 'loadmore'){
					this.currentPage ++;
					this.$emit('pagination');
				}
			}
		}
	}
</script>

<style scoped>
	.componentsContent,.componentsContent>scroll-view{height:100%;}
	/* .self-list{padding-top:15rpx;} */
	.noneBlock{width:100%;height:50rpx;}
</style>

引入

	import selfPagination from './self-pagination/index'
	export default {
		components: {
			selfPagination
		},

使用

<template>
	<view class="page">
		<view class="main">

			<self-pagination class="self-pagination" :listLoading.sync="listLoading" :page.sync="listQuery.page"
				:limit.sync="listQuery.limit" @pagination="getList">

				<view class="card " v-for="(item,index) in 10" :key='index'>
					<view class="cardTop bottomBorder">
						<image class="icon imgico" src="../../../static/icon/gb.png" mode=""></image>
						系统公告
					</view>
					<view class="" style="margin-top: 20rpx;">
						<view class="textWeight">
							标题
						</view>
						<view class="content">
							文本文本文本文本文本文本文本文本文本文本文本
							文本文本文本文本文本文本文本文本文本文本文本
							文本文本文本文本文本文本文本文本文本文本文本
							文本文本文本文本文本文本文本文本文本文本文本
							文本文本文本文本文本文本文本
						</view>
					</view>


				</view>



			</self-pagination>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shuju: [213214, 214236347, 321534653, 111, 241425, 241, 242153556],
				listQuery: {
					page: 1,
					limit: 20,
				
				},
				listLoading: 'loadmore',
				list: [],
			}
		},
		onLoad(e) {
		this.getList();
		},
		methods: {
			getList() {
				this.listLoading = 'loading';
				let formData = {
					...this.listQuery
				}
				formData.is_type = '' ? -1 : this.listQuery.is_type
				tradeApi.getTradeList(this.listQuery).then((data) => {
					let tempData = data.rows;
					this.list = this.listQuery.page === 1 ? tempData : this.list.concat(tempData);
					this.$nextTick(() => {
						let maxPage = Math.ceil(data.totalSize / this.listQuery.limit) || 1;
						this.listLoading = maxPage <= this.listQuery.page ? 'nomore' : 'loadmore';
					})
				}).catch(() => {
					this.listQuery.page--;
					this.listLoading = 'loadmore';
				})
			},
		}
	}
</script>

<style scoped>

	.card {
		padding: 20rpx;
		margin-bottom: 20rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
	}

	.page {
		background-color: #f8f8f8;
		min-height: 100%;
	}

	.main {
		background-color: #f8f8f8;
		padding: 20rpx;
			min-height: 100%;
	}


	.icon {
		width: 30rpx;
		height: 30rpx;
		margin: 0 20rpx 5rpx 0;
	}



	.cardTop {
		padding: 20rpx 0;
		font-weight: 600;
	}

	.textWeight {
		font-size: 35rpx;
		font-weight: 600;
		padding: 0 20rpx;
	}

	.content {
		
		line-height: 40rpx;
		margin: 10rpx 0;
		color: #acacac;
		text-indent:2em
	}

	
</style>