微信小程序 实现折叠面板

折叠面板是一种常见的UI控件，可以帮助用户在有限的空间内展示更多的内容。在微信小程序中，实现折叠面板可以用到wx:if和wx:else控制元素的显示和隐藏。

以下是一个简单的折叠面板实现示例：

1. 在wxml文件中，定义折叠面板的结构：

<view class="panel">
  <view class="header" bindtap="togglePanel">
    {{panelTitle}}
    <image class="arrow" src="{{arrowIcon}}"></image>
  </view>
  <view class="content" wx:if="{{panelOpen}}">
    {{panelContent}}
  </view>
</view>

2. 在js文件中，定义折叠面板的数据和方法：

data: {
  panelOpen: false, // 初始状态为关闭
  panelTitle: '折叠面板标题',
  panelContent: '折叠面板内容',
  arrowIcon: '/images/arrow_down.png' // 初始箭头图标为向下
},
togglePanel: function() {
  this.setData({
    panelOpen: !this.data.panelOpen,
    arrowIcon: this.data.panelOpen ? '/images/arrow_down.png' : '/images/arrow_up.png'
  });
}

3. 在wxss文件中，定义折叠面板的样式：

.panel {
  border: 1rpx solid #ccc;
  border-radius: 5rpx;
  margin: 10rpx;
  overflow: hidden;
  background-color: #fff;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10rpx;
  font-size: 16rpx;
}

.arrow {
  width: 20rpx;
  height: 20rpx;
}

.content {
  padding: 10rpx;
  font-size: 14rpx;
}

通过以上代码，就可以实现一个简单的折叠面板了。用户点击标题区域，折叠面板的内容区域会展开或收缩，同时箭头图标也会相应改变。开发者可以根据自己的需求，对折叠面板的样式和行为进行自定义。