|
如何实现一个可以自定义内容的折叠面板？ 如何对点击、关闭的图标进行条件渲染？ 在小程序页面中，一个可点开、关闭的折叠面板，并且能在点开面板中任意添加不同的内容，需要了解到不同组件的用法、事件绑定的方法以及条件渲染的方法。 （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事件绑定，因为它可以阻止冒泡事件向上冒泡。折叠面板也可以根据需要在展开的面板中进行自定义的配置。 主 编 | 王楠岚 责 编 | 吴怡辰
|
