加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 大数据 > 正文

折叠面板

发布时间:2020-12-14 05:08:51 所属栏目:大数据 来源:网络整理
导读:!-- 折叠面板 -- view wx:for ="{{produceList}}" wx:key ="id" view class ="horizontal between" data-index ="{{index}}" bindtap =‘changeToggle‘ view class ="" 折叠条左边内容 / view view class ="horizontal" 折叠条右边内容 text class ="{{sele
<!-- 折叠面板 -->
  <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]; //一页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 }) },

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读