uni-collapse

折叠面板组件

本 Component 是 uni ext component，需下载插件：uni-collapse

折叠面板组件，包含：

• uni-collapse：父容器
• uni-collapse-item：子面板

一个折叠面板组件可以包含若干uni-collapse-item。每个uni-collapse-item包括顶部标题栏和通过slot传入的内容区。

基本用法

<uni-collapse :accordion="true">
  <uni-collapse-item title="标题 1" :open="true">
    <view><text>内容 1</text></view>
  </uni-collapse-item>
  <uni-collapse-item title="标题 2">
    <view><text>内容 2</text></view>
  </uni-collapse-item>
</uni-collapse>

示例源码如下，请查看 pre > code 标签中的内容

<uni-collapse :accordion="true">
  <uni-collapse-item title="标题 1" :open="true">
    <view><text>内容 1</text></view>
  </uni-collapse-item>
  <uni-collapse-item title="标题 2">
    <view><text>内容 2</text></view>
  </uni-collapse-item>
</uni-collapse>

uni-collapse-item的标题栏的自定义：

• 标题栏容器可通过 title-wrap-class 自定义背景等容器样式。
• 标题栏支持title属性，可通过title-class自定义文字样式。
• 标题展开态可通过 title-open-class 自定义激活文字样式。组件默认使用透明度区分状态，便于外部继续覆盖文字颜色。
• 标题禁用态可通过 title-disabled-class 自定义禁用文字样式。若同时存在展开态和禁用态，以禁用态为最终状态。
• 标题栏右边默认带有箭头，可通过arrow-class自定义箭头样式。该箭头为一个view包括2个直角边的边框，然后旋转而成。
• 箭头展开态和禁用态可分别通过 arrow-open-class、arrow-disabled-class 覆盖。组件默认也使用透明度区分状态，便于外部继续覆盖箭头颜色。
• 如果完全不想要默认包含的title和arrow，也可以传入一个名为title的具名插槽来替换。

具名插槽标题

<uni-collapse-item>
  <template #title="{ open, disabled }">
    <view class="custom-title">
      <view class="custom-title-icon"></view>
      <text class="custom-title-text">{{ open ? '已展开' : '未展开' }}</text>
    </view>
  </template>
  <view><text>自定义标题内容</text></view>
</uni-collapse-item>

示例源码如下，请查看 pre > code 标签中的内容

<uni-collapse-item>
  <template #title="{ open, disabled }">
    <view class="custom-title">
      <view class="custom-title-icon"></view>
      <text class="custom-title-text">{{ open ? '已展开' : '未展开' }}</text>
    </view>
  </template>
  <view><text>自定义标题内容</text></view>
</uni-collapse-item>

externalClass

<uni-collapse-item
  title="自定义样式"
  title-wrap-class="my-title-wrap-class"
  title-class="my-title-class"
  title-open-class="my-title-open-class"
  arrow-class="my-arrow-class"
  arrow-open-class="my-arrow-open-class"
>
  <view><text>内容区域</text></view>
</uni-collapse-item>

示例源码如下，请查看 pre > code 标签中的内容

<uni-collapse-item
  title="自定义样式"
  title-wrap-class="my-title-wrap-class"
  title-class="my-title-class"
  title-open-class="my-title-open-class"
  arrow-class="my-arrow-class"
  arrow-open-class="my-arrow-open-class"
>
  <view><text>内容区域</text></view>
</uni-collapse-item>

Slots

uni-collapse-item

插槽名	说明	插槽参数
default	面板内容	-
title	自定义标题区域	open: boolean、disabled: boolean

Events

uni-collapse-item

事件名	说明	回调参数
change	面板展开状态变化时触发	open: boolean

Expose

uni-collapse-item

方法名	说明
openCollapse(open: boolean)	执行展开/收起，会遵循 disabled 和手风琴逻辑
openOrClose(open: boolean)	直接切换内容显示状态

暗黑模式适配

建议通过组件 class 和 externalClass 组合传入暗色样式：

• 用组件 class 统一控制根节点和内容区等外层视觉。
• 用 title-wrap-class、title-class、title-open-class、arrow-class、arrow-open-class 等 externalClass 覆盖标题区和箭头样式。
• 默认展开态和禁用态主要通过透明度表达，减少颜色覆盖时的交叉冲突。

注意

• 本组件在Android上需HBuilderX 5.09+。在低版本上箭头变颜色+旋转时，在Android上会消失

兼容性

Web	微信小程序	Android	iOS	HarmonyOS	HarmonyOS(Vapor)
5.07	5.07	5.07	5.07	5.07	5.08

属性

名称	类型	默认值	兼容性	描述
accordion	boolean | undefined	true	-	是否开启手风琴模式，开启后同一时间仅允许一个子项展开

参见

• 相关 Bug

uni-collapse-item

折叠面板子项组件

兼容性

Web	微信小程序	Android	iOS	HarmonyOS	HarmonyOS(Vapor)
5.07	5.07	5.07	5.07	5.07	5.08

属性

名称	类型	默认值	兼容性	描述
title	string | undefined	-	-	折叠项标题文字
open	boolean | undefined	false	-	是否默认展开
disabled	boolean | undefined	false	-	是否禁用，禁用后点击标题不会展开或收起
titleWrapClass	classString	-	-	-
titleClass	classString	-	-	-
titleOpenClass	classString	-	-	-
titleDisabledClass	classString	-	-	-
arrowClass	classString	-	-	-
arrowOpenClass	classString	-	-	-
arrowDisabledClass	classString	-	-	-
@change	Event	-	-	-

参见

• 相关 Bug