码迷,mamicode.com
首页 > 其他好文 > 详细

折叠面板

时间:2019-08-25 13:58:36      阅读:64      评论:0      收藏:0      [点我收藏+]

标签:produce   UNC   col   status   idt   style   dstat   data   data-   

<!-- 折叠面板 -->
  <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 }) },

 

折叠面板

标签:produce   UNC   col   status   idt   style   dstat   data   data-   

原文地址:https://www.cnblogs.com/XUYIYUAN/p/11407444.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!