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

Posted 2021-06-27 水星记_

实现效果

代码展示

html

<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>
					<image :src="item.headPortrait">
					</image>
					<text class="userName">{{item.nickname}}</text>
				</view>
				<view class="datas">{{ item. createTime | timeStamp}}</view>
			</view>
		</view>
		<view class="bottomAdd" v-show="this.total >= max" @tap="more">查看更多</view>
</view>

data

	data() {
			return {
				max: 1, //默认展示几条数据
				isOpen: false, // 是否展开全部信息的标识 Boolean 默认false
				total: 0, //默认0，当值大于等于5条显示查看更多按钮
			}
		},

js

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