【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>

---

实现效果