【uniapp开发实战】点击加载更多,每次增加 n 条数据的实现方法

前言

在开发 uniapp 时,列表数据的展示与加载是非常常见的需求。那么如何实现默认展示 n 条数据,同时又可以通过点击加载更多来实现每次 +n 呢?那么今天就让我们一起探究一下如何在 uniapp 中实现这个功能吧。


实现效果

在这里插入图片描述


完整代码

<template>
	<view class="outerBox">
		<view class="recordCon">
			<view class="recordTit">
				已邀请<text>{{total}}</text></view>
			<view class="contantBox" v-for="(item,index) in listInfo" :key="index">
				<view class="logoTxt" v-show="isOpen || index < max">
					<view class="imgTxt">
						<image :src="item.headPortrait"></image>
						<view class="userName">{{item.nickname}}</view>
					</view>
					<view class="datas">{{ item.createTime}}</view>
				</view>
			</view>
			<view class="bottomAdd" v-show="total >= max" @tap="more">查看更多</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				max: 3, //默认展示几条数据
				isOpen: false, // 是否展开全部信息的标识 Boolean 默认false
				total: 6, //总条数
				// 模拟数据
				listInfo: [{
						nickname: "测试1",
						createTime: "2022-08-01",
						headPortrait: "http://localhost:8889/static/images/avatar.jpeg",
					},
					{
						nickname: "测试2",
						headPortrait: "http://localhost:8889/static/images/avatar.jpeg",
						createTime: "2022-08-02",
					},
					{
						nickname: "测试3",
						headPortrait: "http://localhost:8889/static/images/avatar.jpeg",
						createTime: "2022-08-03",
					},
					{
						nickname: "测试4",
						headPortrait: "http://localhost:8889/static/images/avatar.jpeg",
						createTime: "2022-08-04",
					},
					{
						nickname: "测试5",
						headPortrait: "http://localhost:8889/static/images/avatar.jpeg",
						createTime: "2022-08-05",
					},
					{
						nickname: "测试6",
						headPortrait: "http://localhost:8889/static/images/avatar.jpeg",
						createTime: "2022-08-06",
					},
				],
			};
		},

		methods: {
			more() {
				this.max += 1;
			},
		},

	}
</script>

<style scoped>
	.outerBox {
		background: rgb(253, 213, 47);
		padding: 16px;
		margin: 16px;
	}

	.recordCon {
		background: rgb(254, 247, 229);
		border-radius: 6px;
	}

	.recordTit {
		display: flex;
		justify-content: center;
		color: rgb(255, 171, 2);
		padding-top: 10px;
	}

	.logoTxt {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
	}

	.logoTxt image {
		border-radius: 50%;
		width: 30px;
		height: 30px;
	}

	.imgTxt {
		display: flex;
		align-items: center;
	}

	.userName {
		padding-left: 10px;
	}

	.bottomAdd {
		display: flex;
		justify-content: center;
		color: rgb(157, 157, 157);
		padding-bottom: 10px;
		font-size: 14px;
	}
</style>

另一种形式,默认展开n条数据,点击展开按钮展开剩下所有数据,点击收起折叠展开的数据

<template>
	<view class="outerBox">
		<view class="recordCon">
			<view class="recordTit">已邀请<text>{{total}}</text></view>
			<view v-for="(item,index) in listInfo" :key="index">
				<view class="logoTxt" v-show="isOpen || index < max">
					<view class="imgTxt">
						<image :src="item.headPortrait"></image>
						<text class="userName">{{item.nickname}}</text>
					</view>
					<view class="datas">{{item.createTime}}</view>
				</view>
			</view>
			<view class="bottomAdd" v-show="!isOpen && listInfo.length > max" @click="isOpen = !isOpen">展开</view>
			<view class="bottomAdd" v-show="isOpen && listInfo.length > max" @click="isOpen = !isOpen">收起</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				max: 1, //默认展示几条数据
				total:6,//总条数
				isOpen: false, // 是否展开全部信息的标识 Boolean 默认false
				// 模拟数据
				listInfo: [{
						nickname: "测试1",
						createTime: "2022-08-01",
						headPortrait: "http://localhost:8889/static/images/avatar.jpeg",
					},
					{
						nickname: "测试2",
						headPortrait: "http://localhost:8889/static/images/avatar.jpeg",
						createTime: "2022-08-02",
					},
					{
						nickname: "测试3",
						headPortrait: "http://localhost:8889/static/images/avatar.jpeg",
						createTime: "2022-08-03",
					},
					{
						nickname: "测试4",
						headPortrait: "http://localhost:8889/static/images/avatar.jpeg",
						createTime: "2022-08-04",
					},
					{
						nickname: "测试5",
						headPortrait: "http://localhost:8889/static/images/avatar.jpeg",
						createTime: "2022-08-05",
					},
					{
						nickname: "测试6",
						headPortrait: "http://localhost:8889/static/images/avatar.jpeg",
						createTime: "2022-08-06",
					},
				],
			};
		},
	}
</script>

<style scoped>
	.outerBox {
		background: rgb(253, 213, 47);
		padding: 16px;
		margin: 16px;
	}

	.recordCon {
		background: rgb(254, 247, 229);
		border-radius: 6px;
	}

	.recordTit {
		display: flex;
		justify-content: center;
		color: rgb(255, 171, 2);
		padding-top: 10px;
	}

	.logoTxt {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
	}

	.logoTxt image {
		border-radius: 50%;
		width: 30px;
		height: 30px;
	}

	.imgTxt {
		display: flex;
		align-items: center;
	}

	.userName {
		padding-left: 10px;
	}

	.bottomAdd {
		display: flex;
		justify-content: center;
		color: rgb(157, 157, 157);
		padding-bottom: 10px;
		font-size: 14px;
	}
</style>

实现效果

在这里插入图片描述

uniapp实现加载更多的功能可以通过使用onReachBottom事件来实现。当用户滑动页面到底部时,就会触发onReachBottom事件,我们可以在这个事件的回调函数中实现加载更多的逻辑。首先,我们需要在页面的配置文件(如.vue文件)中注册onReachBottom事件。然后在事件回调函数中执行加载更多的操作,可以通过向后端发送请求获取更多数据,并将新数据添加到已有的数据列表中。最后,将更新后的数据重新渲染到页面上,从而实现加载更多的效果。这样,当用户滑动页面到底部时,就会自动加载更多数据了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [【uniapp开发实战点击加载更多每次增加 n 数据实现方法](https://blog.youkuaiyun.com/Shids_/article/details/117815570)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [uniapp滚动加载 下拉刷新](https://blog.youkuaiyun.com/2303_76218115/article/details/130981650)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [Java微信小程序B2C商城 H5+APP源码 前后端分离](https://download.youkuaiyun.com/download/m0_55416028/88263033)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

水星记_

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

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

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

打赏作者

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

抵扣说明:

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

余额充值