uniapp手動實現摺疊面板(展開一項,其他項收起)
阿新 • • 發佈:2020-12-12
效果如下:
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 }