歡迎點擊「算法與編程之美」↑關注我們！
本文首發於微信公衆號："算法與編程之美"，歡迎關注，及時瞭解更多此係列文章。
問題描述
如何實現一個可以自定義內容的摺疊面板？
如何對點擊、關閉的圖標進行條件渲染？
在小程序頁面中，一個可點開、關閉的摺疊面板，並且能在點開面板中任意添加不同的內容，需要了解到不同組件的用法、事件綁定的方法以及條件渲染的方法。
解決方案
（1）wxml事件綁定
首先需要在view中加入data-index在事件中獲取這些自定義的節點數據，用於事件的邏輯處理；然後需要添加catchtap事件綁定。
注意：關閉時是向下箭頭，點擊後是向上箭頭。這個過程需要對圖片進行條件渲染，添加一個shouIndex。代碼如下：
表1 wxml代碼示例
<view> <view data-index='1' catchtap='panel'> <view>創建的歌單</view> <view><image src="/images/{{showIndex == 1 ? 'up':'down'}}.png"></image></view> </view> <view wx:if="{{showIndex == 1}}"> <view> <view> <image src="/images/img4.jpg"></image> <text>歌單1</text> </view> <view> <image src="/images/img5.jpg"></image> <text>歌單2</text> </view> <view> <image src="/images/img6.jpg"></image> <text>歌單3</text> </view> </view> </view> </view> |
（2）wxss配置
在wxss中需要配置將文字和箭頭圖片放在一行的左右兩端。代碼如下：
表2 wxss代碼示例
.help_item { margin: 10rpx auto; } .title { font-size: 40rpx; height: 100rpx; line-height: 100rpx; background: aliceblue; display: flex; } .title_1 { width: 630rpx; height: 100rpx; padding-left: 20rpx; } .title_2 { width: 50rpx; height: 100rpx; text-align: center; } .title_2 image { width: 40rpx; height: 40rpx; margin: 30rpx auto; } |
（3）js配置
在wxml中已經準備好的事件catchtap='panel'進行數據的綁定。代碼如下：
表3 js代碼示例
panel: function (e) { if (e.currentTarget.dataset.index != this.data.showIndex) { this.setData({ showIndex: e.currentTarget.dataset.index }) } else { this.setData({ showIndex: 0 }) } }, |
（4）效果圖
結語
摺疊面板的實現主要放在事件綁定上，注意用到的是catch事件綁定，因爲它可以阻止冒泡事件向上冒泡。摺疊面板也可以根據需要在展開的面板中進行自定義的配置。
主 編 | 王楠嵐
責 編 | 吳怡辰
where2go 團隊
微信號：算法與編程之美
長按識別二維碼關注我們!
溫馨提示：點擊頁面右下角“寫留言”發表評論，期待您的參與！期待您的轉發！