前言
在开发 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>