1. 程式人生 > 實用技巧 >uniapp手動實現摺疊面板(展開一項,其他項收起)

uniapp手動實現摺疊面板(展開一項,其他項收起)

效果如下:

 1 <!-- 列表 -->
 2 <view class="collapse" v-for="(item,index) in itemList" :key="index">
 3 <view @click="changeContent(item,index)">
 4 <view class="coll-header">
 5 <view style="display: flex;">
 6 <image :src="item.open?item.imgUrl2:item.imgUrl1" style="width: 44rpx;height: 44rpx;"
></image> 7 <view class="head-txt">{{item.head}}</view> 8 </view> 9 <view class="sub-num">{{item.subnum}}道<u-icon name="arrow-right" color="#999999" size="28"></u-icon> 10 </view> 11 </view> 12 <!-- 展開 --> 13 <view class="box"> 14 <
view class="box-cont" v-if="item.open==true" v-for="(itemMsg,indexMsg) in item.body" :key="indexMsg"> 15 <view style="display: flex;"> 16 <view class="box-circle"></view> 17 <text style="font-size: 28rpx;">{{itemMsg.msg}}</text> 18 </view> 19 <view class
="sub-num">{{itemMsg.num}}道<u-icon name="arrow-right" color="#999999" size="28"></u-icon> 20 </view> 21 </view> 22 </view> 23 </view> 24 </view>
 1 <script>
 2     export default {
 3         data() {
 4             return {
 5                 disabled:false,
 6                 show: false,
 7                 itemList: [{
 8                     head: "考點名稱1",
 9                     subnum: '12',
10                     body: [{
11                             msg: '111',
12                             num: '3',
13                         },
14                         {
15                             msg: '222',
16                             num: '2',
17                         }
18                     ],
19                     open: false,
20                     disabled: true,
21                     imgUrl1: '../../../static/images/bottom.png',
22                     imgUrl2: '../../../static/images/top.png',
23                 }, {
24                     head: "考點名稱2",
25                     subnum: '10',
26                     body: [{
27                         msg: '333',
28                         num: '4',
29                     },
30                     {
31                         msg: '444',
32                         num: '5',
33                     }
34                     ],
35                     open: false,
36                     imgUrl1: '../../../static/images/bottom.png',
37                     imgUrl2: '../../../static/images/top.png',
38                 }, {
39                     head: "考點名稱3",
40                     subnum: '7',
41                     body: [{
42                             msg: '666',
43                             num: '4',
44                         },
45                         {
46                             msg: '555',
47                             num: '3',
48                         }
49                     ],
50                     open: false,
51                     imgUrl1: '../../../static/images/bottom.png',
52                     imgUrl2: '../../../static/images/top.png',
53                 }],
54 
55             }
56         },
57         methods: {
58             changeContent(item,index) {
59                 this.itemList.forEach(i => {
60                     if (i.open !== this.itemList[index].open) {
61                         i.open = false;
62                     }
63                 })
64                 item.open = !item.open
65             }
66         }
67     }
68 </script>
 1     .collapse {
 2         padding: 0 36rpx;
 3     }
 4 
 5     .coll-header {
 6         display: flex;
 7         height: 140rpx;
 8         align-items: center;
 9         justify-content: space-between;
10     }
11 
12     .box {
13         overflow: hidden;
14         transition: all 0.3;
15         border-bottom: 1px solid #F9F9F9;
16     }
17 
18     .head-txt {
19         margin-left: 15rpx;
20         font-size: 32rpx;
21         font-weight: 700;
22     }
23 
24     .sub-num {
25         font-size: 28rpx;
26         color: #999999;
27     }
28 .box-circle {
29     width:36rpx;
30     height: 36rpx;
31     border-radius: 50%;
32     background-color: #18BBB4;
33     margin-left: 4rpx;
34     margin-right: 19rpx;
35 }
36     .box-cont {
37         display: flex;
38         justify-content: space-between;
39         margin-bottom: 50rpx;
40     }
41     .box-cont:last-child{
42         margin-bottom:20rpx;
43     }