实现效果
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条
},
}
另一种形式，默认展开n条数据，点击展开按钮展开剩下所有数据，点击收起折叠展开的数据
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="!isOpen && listInfo.length > max" @click="isOpen = !isOpen">查看更多</view>
<view class="bottomAdd" v-show="isOpen && listInfo.length > max" @click="isOpen = !isOpen">收起</view>
</view>
data
data() {
return {
max: 1, //默认展示几条数据
isOpen: false, // 是否展开全部信息的标识 Boolean 默认false
}
},
实现效果
