折叠面板

Posted 2022-08-24 xuyiyuan

<!-- 折叠面板 -->
  <view wx:for="produceList" wx:key="id">
    <view class="horizontal between" data-index="index" bindtap=‘changeToggle‘>
      <view class="">折叠条左边内容</view>
      <view class="horizontal">折叠条右边内容<text class="selectedFlag[index]?‘triangle-up‘:‘triangle-down‘"></text></view>
    </view>
    <view class=‘‘ hidden="!selectedFlag[index]">
      <!-- 折叠显示的内容 -->
    </view>
  </view>

.triangle-down
  width: 0;
  height: 0;
  border-width: 8px 4px 0;
  border-style: solid;
  border-color:#b2b2b2 transparent transparent;
  margin: 5rpx 0 0 10rpx;

.triangle-up
  width:0;
  height:0;
  border-width:0 4px 8px;
  border-style:solid;
  border-color:transparent transparent #b2b2b2;
  margin: 5rpx 0 0 10rpx;

// 默认false，状态变化修改对应index下标的状态值
const foldStatus = [false, false, false, false, false, false, false, false, false, false, false, false, false, false, false]; //一页15条数据



// 展开折叠选择  
  changeToggle: function (e) 
    var index = e.currentTarget.dataset.index;
    if (this.data.selectedFlag[index]) 
      this.data.selectedFlag[index] = false;
     else 
      this.data.selectedFlag[index] = true;
    
    this.setData(
      selectedFlag: this.data.selectedFlag
    )
  ,