如何实现折叠面板collapse_移动开发平台 mPaaS-阿里云帮助中心

本文介绍折叠面板（collapse）。

collapse

属性名	类型	默认值	描述	必选
activeKey	Array / String	-	当前激活 tab 面板的 key，accordion 模式下默认第一个元素	false
onChange	(activeKeys: Array): void	-	切换面板的回调。	false
accordion	Boolean	false	手风琴模式。	false
collapseKey	String	false	唯一标示 collapse 和对应的 collapse-item。	false

collapse-item

属性名	类型	默认值	描述	必选
itemKey	String	-	对应的 activeKey，组件的唯一标识。	false
header	String	-	面板头内容	false
collapseKey	String	false	唯一标示 collapse 和对应的 collapse-item。	false

当 Page 中存在多个 collapse 组件时，collapse 和对应的 collapse-item 的 collapseKey 属性为必选值并且必须相等，当 Page 中只有一个 collapse 组件时，collapseKey 不需要提供。

代码示例

{
  "defaultTitle": "小程序 AntUI 组件库",
  "usingComponents": {
    "collapse": "mini-antui/es/collapse/index",
    "collapse-item": "mini-antui/es/collapse/collapse-item/index"
  }
}

<view>
  <view class="demo-title">基础用法</view>
  <collapse
    className="demo-collapse"
    collapseKey="collapse1"
    activeKey="{{['item-11', 'item-13']}}"
    onChange="onChange"
  >
    <collapse-item header="标题1" itemKey="item-11" collapseKey="collapse1">
      <view class="item-content content1">
        <view>内容区域</view>
      </view>                
    </collapse-item>
    <collapse-item header="标题2" itemKey="item-12" collapseKey="collapse1">
      <view class="item-content content2">
        <view>内容区域</view>
      </view>
    </collapse-item>
    <collapse-item header="标题3" itemKey="item-13" collapseKey="collapse1">
      <view class="item-content content3">
        <view>内容区域</view>         
      </view>
    </collapse-item>
  </collapse>
  <view class="demo-title">手风琴模式</view>
  <collapse
    className="demo-collapse"
    collapseKey="collapse2"
    activeKey="{{['item-21', 'item-23']}}"
    onChange="onChange"
    accordion="{{true}}"
  >
    <collapse-item header="标题 1" itemKey="item-21" collapseKey="collapse2">
      <view class="item-content content1">
        <view>内容区域</view>
      </view>                
    </collapse-item>
    <collapse-item header="标题 2" itemKey="item-22" collapseKey="collapse2">
      <view class="item-content content2">
        <view>内容区域</view>
      </view>
    </collapse-item>
    <collapse-item header="标题 3" itemKey="item-23" collapseKey="collapse2">
      <view class="item-content content3">
        <view>内容区域</view>         
      </view>
    </collapse-item>
  </collapse>  
</view>

.item-content {
  padding: 14px 16px;
  font-size: 17px;
  color: #333;
  line-height: 24px;
}
.content1 {
  height: 200px;
}
.content2 {
  height: 50px;
}
.content3 {
  height: 100px;
}
.demo-title {
  padding: 14px 16px;
  color: #999;
}
.demo-collapse {
  border-bottom: 1px solid #eee;
}

Page({});