uniapp 实现默认展示 n 条数据，点击加载更多每次+ n

实现效果

完整代码

<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: "https://img1.baidu.com/it/u=3009731526,373851691&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1664298000&t=1d9c2c16498f39618bad58b0c17343c7",
					},
					{
						nickname: "测试2",
						headPortrait: "https://img1.baidu.com/it/u=2658939207,2791674017&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
						createTime: "2022-08-02",
					},
					{
						nickname: "测试3",
						headPortrait: "https://img0.baidu.com/it/u=2028084904,3939052004&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1664298000&t=e6324039bc217336ad91a4bce9a87c6b",
						createTime: "2022-08-03",
					},
					{
						nickname: "测试4",
						headPortrait: "https://img1.baidu.com/it/u=3672431567,2990196533&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1664298000&t=b1637e013a3a3f5cf4f77ccd3fc941f6",
						createTime: "2022-08-04",
					},
					{
						nickname: "测试5",
						headPortrait: "https://img0.baidu.com/it/u=1136268661,3362066468&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500",
						createTime: "2022-08-05",
					},
					{
						nickname: "测试6",
						headPortrait: "https://img1.baidu.com/it/u=1768801355,2603202320&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
						createTime: "2022-08-06",
					},
				],
			};
		},

		methods: {
			// 查看更多展示20条
			more() {
				this.max += 1; //每次点击加1条
			},
		},

	}
</script>

<style scoped>
	.outerBox {
		background: rgb(253, 213, 47);
		padding: 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: 12px;
	}
</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, //默认展示几条数据
				isOpen: false, // 是否展开全部信息的标识 Boolean 默认false
				// 模拟数据
				listInfo: [{
						nickname: "测试1",
						createTime: "2022-08-01",
						headPortrait: "https://img1.baidu.com/it/u=3009731526,373851691&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1664298000&t=1d9c2c16498f39618bad58b0c17343c7",
					},
					{
						nickname: "测试2",
						headPortrait: "https://img1.baidu.com/it/u=2658939207,2791674017&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
						createTime: "2022-08-02",
					},
					{
						nickname: "测试3",
						headPortrait: "https://img0.baidu.com/it/u=2028084904,3939052004&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1664298000&t=e6324039bc217336ad91a4bce9a87c6b",
						createTime: "2022-08-03",
					},
					{
						nickname: "测试4",
						headPortrait: "https://img1.baidu.com/it/u=3672431567,2990196533&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1664298000&t=b1637e013a3a3f5cf4f77ccd3fc941f6",
						createTime: "2022-08-04",
					},
					{
						nickname: "测试5",
						headPortrait: "https://img0.baidu.com/it/u=1136268661,3362066468&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500",
						createTime: "2022-08-05",
					},
					{
						nickname: "测试6",
						headPortrait: "https://img1.baidu.com/it/u=1768801355,2603202320&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
						createTime: "2022-08-06",
					},
				],
			};
		},


		methods: {
			// 查看更多展示20条
			more() {
				this.max += 1; //每次点击加1条
			},
		},

	}
</script>

<style scoped>
	.outerBox {
		background: rgb(253, 213, 47);
		padding: 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: 12px;
	}
</style>

实现效果