如何设置折叠面板Collapse的信息展示组件_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

可以折叠/展开的内容区域，对复杂区域进行分组和隐藏，保持页面的整洁。

重要

手风琴是一种特殊的折叠面板，只允许单个内容区域展开。
Collapse 组件与 CollapseItem 组件必须有相同的 uid，且 uid 页面唯一。

属性

Collapse

属性	类型	必填	默认值	说明
name	string[]	否	[]	当前激活的索引
accordion	boolean	否	-	是否是手风琴模式，仅一个内容被展开。
uid	string	否	-	当页面有多个 Collapse 时需传入 uid，且页面必须唯一，与内部的 CollapseItem 组件的 uid 一致。
className	string	否	-	类名

CollapseItem

属性	类型	必填	默认值	说明
title	string	否	-	标题栏内容
name	string	是	-	标识，必须唯一
uid	string	否	-	当页面有多个 Collapse 时需传入 uid，必须页面唯一，与外部的 CollapseItem 组件的 uid 一致。
className	string	否	-	类名

事件

Collapse

事件名	说明	类型
onChange	面板展开/收缩时，获取当前展开的面板。	`( value : string[]) => void`

插槽

插槽名称	说明
title	CollapseItem 组件标题插槽，当 title 属性存在时，插槽不生效。

样式类

Collapse

类名	说明
amd-avatar	整体样式
amd-avatar-src	图片样式
amd-avatar-content	头像描述样式
amd-avatar-name	name 样式
amd-avatar-desc	desc 样式

CollapseItem

类名	说明
amd-avatar	整体样式
amd-avatar-src	图片样式
amd-avatar-content	头像描述样式
amd-avatar-name	name 样式
amd-avatar-desc	desc 样式

代码示例

基本使用

index.axml 的代码示例如下：

<view>
  <demo-block title="基础用法" padding="0">
    <collapse 
      name="{{['item-0']}}" 
      onChange="onChange" 
      uid="collapse-0" 
      accordion="{{false}}">
      <collapse-item 
        title="第一项" 
        uid="collapse-0" 
        name="item-0">
        Pariatur dolore commodo commodo elit adipisicing sunt adipisicing ex duis labore nisi sunt. Magna ut minim deserunt. Sunt velit occaecat incididunt aliqua. Dolore officia voluptate aute reprehenderit anim excepteur elit.
      </collapse-item>
      
      <collapse-item 
        name="item-1" 
        title="第二项" 
        uid="collapse-0">
        Dolor reprehenderit cillum aliqua qui id Lorem elit anim do minim mollit. Commodo id cupidatat est tempor anim. Fugiat ipsum dolor nostrud officia mollit. Aliquip aliqua pariatur tempor excepteur commodo non et adipisicing magna ex nostrud dolore cillum exercitation enim. In sunt velit laboris ullamco et in reprehenderit sit excepteur aute in dolor. Sunt minim incididunt consectetur laborum sint fugiat voluptate sunt culpa fugiat duis. Ad consectetur ad aliquip aute labore magna commodo est cupidatat.
      </collapse-item>
    
      <collapse-item 
        title="第三项" 
        name="item-2" 
        uid="collapse-0">
        Ad ut ullamco exercitation do excepteur ipsum ipsum consectetur nulla fugiat est et. Occaecat ullamco nulla mollit cupidatat dolore nulla minim cillum proident laboris mollit. Veniam consectetur esse consectetur. Fugiat in laborum anim.
      </collapse-item>
      
    </collapse>
  </demo-block>
  <demo-block title="手风琴模式"  padding="0">
    <collapse 
      name="{{['item-0']}}" 
      onChange="onChange" 
      uid="collapse-1" 
      accordion>
      <collapse-item 
        title="第一项" 
        uid="collapse-1" 
        name="item-0">
        手风琴模式只能同时展开一个
      </collapse-item>
      
      <collapse-item 
        name="item-1" 
        title="第二项" 
        uid="collapse-1">
        手风琴模式只能同时展开一个
      </collapse-item>
    
      <collapse-item 
        title="第三项" 
        name="item-2" 
        uid="collapse-1">
        手风琴模式只能同时展开一个
      </collapse-item>
    </collapse>
  </demo-block>

</view>

index.js 的代码示例如下：

Page({
  data: {
   
  },
});

index.json 的代码示例如下：

{
  "defaultTitle": "Collapse",
  "usingComponents": {
    "collapse": "antd-mini/es/Collapse/index",
    "collapse-item": "antd-mini/es/Collapse/CollapseItem/index",
    "icon": "antd-mini/es/Icon/index",
    "demo-block": "../../components/DemoBlock/index"
  }
}

自定义模式

index.axml 的代码示例如下：

<view>
  <demo-block title="禁用状态" padding="0">
    <collapse 
      className="demo-collapse" 
      uid="collapse-1" 
      accordion="{{false}}">
      <collapse-item 
        title="第一项" 
        uid="collapse-1" 
        name="item-0">
        这里是第一项的内容
      </collapse-item>
      
      <collapse-item 
        name="item-1" 
        uid="collapse-1"
        disabled="{{true}}"
        title="第二项">
        这里是第二项的内容
      </collapse-item>

      <collapse-item 
        name="item-2" 
        uid="collapse-1"
        disabled="{{true}}"
        title="第二项">
        这里是第三项的内容
      </collapse-item>
    </collapse>
  </demo-block>
  <demo-block title="自定义图标" padding="0">
    <collapse 
      className="demo-collapse" 
      uid="collapse-2" 
      accordion="{{false}}">
      <collapse-item 
        uid="collapse-2" 
        name="item-0">
        <view slot="title">
          <icon type="FireFill" size="small"/>
          <text style="color: red; padding-left:12px">title 插槽</text>
        </view>
        自定义图标
      </collapse-item>
      
      <collapse-item 
        name="item-1" 
        uid="collapse-2"
        expandIcon="AddOutline"
        closeIcon="MinusOutline"
        brief="辅助信息">
        <view slot="title">
          <text style="color: red; padding-right:8px">title 插槽</text>
          <icon type="FireFill" size="small"/>
        </view>
        自定义图标
      </collapse-item>
    </collapse>
  </demo-block>
  <demo-block title="受控模式" padding="0">
    <collapse 
      className="demo-collapse" 
      name="{{name}}" 
      onChange="handleChange" 
      uid="collapse-0" 
      accordion="{{false}}">
      <collapse-item 
        title="自适应高度" 
        uid="collapse-0" 
        name="item-0">
        <view class="item-content">
          <view>内容区域</view>
        </view>
      </collapse-item>
      
      <collapse-item 
        name="item-1" 
        uid="collapse-0">
        <view slot="title">
          <text style="color: red;">title 插槽</text>
        </view>
        <view class="item-content content2">
          <view>内容区域</view>
        </view>
      </collapse-item>
    
      <collapse-item 
        title="标题" 
        name="item-2" 
        uid="collapse-0">
        <view class="item-content content3">
          <view>内容区域</view>
        </view>
      </collapse-item>
      
      <collapse-item 
        title="标题" 
        name="item-3" 
        uid="collapse-0">
        <view class="item-content content3">
          <view>内容区域</view>
        </view>
      </collapse-item>
    </collapse>
    <button onTap="handleControl">随机展开一项</button>
  </demo-block>
</view>

index.js 的代码示例如下：

Page({
  data: {
    name: ['item-1'],
  },
  handleChange(e) {
    this.setData({ name: e });
    console.log(e);
  },
  handleControl() {
    const getRandom = () => {
      const random = Math.random();
      return random < 0.25 ? 0 : random < 0.5 ? 1 : random < 0.75 ? 2 : 3;
    };
    const { name } = this.data;
    let newName = [];
    if (name.length === 1) {
      let randonIndex;
      // eslint-disable-next-line no-constant-condition
      while (true) {
        randonIndex = getRandom();
        if (randonIndex !== Number(name[0].substring(5))) {
          break;
        }
      }
      newName = [`item-${randonIndex}`];
    } else {
      newName = [`item-${getRandom()}`];
    }
    this.setData({
      name: newName,
    });
  },
});

index.acss 的代码示例如下：

.item-content {
  font-size: 34rpx;
  color: #333;
  line-height: 48rpx;
  background-color: white;
}
.amd-icon {
  font-size: 22px;
}

index.json 的代码示例如下：

{
  "defaultTitle": "Collapse：自定义",
  "usingComponents": {
    "collapse": "antd-mini/es/Collapse/index",
    "collapse-item": "antd-mini/es/Collapse/CollapseItem/index",
    "icon": "antd-mini/es/Icon/index",
    "demo-block": "../../components/DemoBlock/index",
    "button": "antd-mini/es/Button/index"
  }
}