微信小程序|自定义折叠面板

算法与编程之美

发布于 2020-07-02 15:02:53

3.2K0

发布于 2020-07-02 15:02:53

文章被收录于专栏：算法与编程之美算法与编程之美

问题描述

如何实现一个可以自定义内容的折叠面板？

如何对点击、关闭的图标进行条件渲染？

在小程序页面中，一个可点开、关闭的折叠面板，并且能在点开面板中任意添加不同的内容，需要了解到不同组件的用法、事件绑定的方法以及条件渲染的方法。

解决方案

（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）效果图