<template>
<view class="content">
<view class="list">
<view class="list-item" v-for="(item,index) in list" :key="index">
<view class="title">{{item.content}}</view>
<!-- 展示隐藏内容的条件:
1、目标item的索引index等于点击项item的索引index 即:index==showIndex
2、flag的值为true-->
<!-- 关闭隐藏内容的条件:
1、flag的值为false
ps:打开页面默认渲染class:item 所以不需要索引值index相等,
同时我的需求是显示第一个item的隐藏内容的情况下,点击第二个item,
第一个item的隐藏内容不消失,继续显示全部,直到我再次点击它关闭,-->
<view :class="{active:index==showIndex && item.flag,item: !item.flag}">
<view class="inner-item" v-for="(child,childIndex) in item.itemList" :key="childIndex">
<view>{{child.info}}</view>
<text class="iconfont iconxiangyou3 f24"></text>
</view>
</view>
<!-- 子列表长度不超过2个的时候点击区域不显示 v-if="item.itemList.length>2"-->
<view class="skip" @click="showAll(index)" v-if="item.itemList.length>2" >
<text>{{item.flag?'收起':'展开全部'}}</text>
<!--iconfont 引入的阿里巴巴矢量图标库 用自己引入的上下箭头的图标就行 -->
<text class="iconfont" :class="item.flag?'iconshanghua':'iconxiahua'"></text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 点击项的index索引
showIndex: null,
list: [{
content: '主题内容1',
//后端没有传回这个字段的话,在请求接口获得数据之后遍历数组给每一个item添加一个flag,默认值为false
// this.list.forEach((item)=>{
// item.flag = false
// })
flag: false,
itemList: [{
info: '1'
},
{
info: '2'
},
{
info: '3'
},
{
info: '4'
}
]
},
{
content: '主题内容2',
flag: false,
itemList: [{
info: 'a'
},
{
info: 'b'
},
{
info: 'c'
},
{
info: 'd'
}
]
},
{
content: '主题内容3',
flag: false,
itemList: [{
info: 'I'
},
{
info: 'II'
}
]
}
]
}
},
onLoad() {},
methods: {
showAll(index) {
this.showIndex = index
this.list[index].flag = !this.list[index].flag
console.log(this.showIndex, this.list[index].flag)
}
}
}
</script>
<style lang="scss" scoped>
page {
background: #f1f1f1;
}
.list {
margin: 20rpx;
.list-item {
padding: 20rpx;
margin-bottom: 20rpx;
background-color: #fff;
border-radius: 10rpx;
box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.04);
.title {
font-weight: 700;
font-size: 32rpx;
padding-bottom: 20rpx;
margin-bottom: 20rpx;
border-bottom: 1px solid #f1f1f1;
}
.item {
height: 160rpx;
overflow-y: hidden;
}
.active {
height: 100%;
transition: all 0.5s;
}
.inner-item {
height: 80rpx;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20rpx;
background-color: #f1f1f1;
border-bottom: 1px dashed #fff;
}
.skip {
margin-top: 20rpx;
text-align: center;
.iconfont{
padding-left: 20rpx;
}
}
}
}
</style>