微信小程序 之多级折叠面板实例

目的：折叠面板默认不显示，利用toggle实现元素的显示和隐藏
效果：点击元素1时显示元素1的隐藏部分，再次点击时元素1时，元素1隐藏且不影响其他元素的效果；
若点击元素1后点击了元素2，则元素1和元素2的隐藏部分都显示
wxml部分代码如下：

	
		
			{
    {item.title}}
		
		
			收起
			更多
			
		
	
	
		
			应付日期
			{
    {item.date}}
		
		
			应付金额
			¥{
    {item.amount}}
		
		
			
				交易金额
				¥{
    {item.transaction}}
			
			
				逾期费
				{
    {item.fee}}
			
		
	

js部分代码如下：

Page({
  /**
   * 页面的初始数据
   */
  data: {
    array: [{
      title: '200517-00004248',
      date: '2020-07-20',
      amount: '200',
      transaction: '180',
      fee: '20',
      toggle: false,
      value: '99',
      checked: 'true'
    }, {
      title: '200517-00004248',
      date: '2020-07-20',
      date: '2020-07-20',
      amount: '200',
      transaction: '180',
      fee: '20',
      toggle: false,
      value: '8',
    }, {
      title: '200517-00004248',
      date: '2020-07-20',
      date: '2020-07-20',
      amount: '200',
      transaction: '190',
      fee: '10',
      toggle: false,
      value: '200517-00004248',
    }]
  },
  //折叠面板
  panel: function (e) {
    //获取到元素的id值
    var id = e.currentTarget.dataset.index;
    //获取到全部数据
    var items = this.data.array;
    //获取到当前元素的显示与隐藏
    //var ishow = !items[id].toggle;
    //将新的toggle值复制给原来的toggle
    items[id].toggle = !items[id].toggle;
    this.setData({
      array: items
    })
  }
})

wxss部分代码如下：

.wehx-card_box {
  padding: 0 30rpx;
  margin: 20rpx;
}

.wehx-flex_middle {
  padding: 20rpx 0;
}

.wehx-flex_middle .item-padding:not(:last-of-type) {
  padding-bottom: 10rpx;
}

.iconfont {
  padding-left: 10rpx;
  font-size: 24rpx;
}

初始化效果如图：

最终效果如图所示：