Fusions

Appearance

Collapse 折叠面板 ​

iPhone

此组件为折叠面板用来折叠/显示过长的内容或者是列表。通常是在多内容分类项使用，折叠不重要的内容，显示重要内容。点击可以展开折叠部分。

平台差异说明 ​

APPH5微信小程序支付宝小程序QQ小程序···
√√√√√适配中

代码示例 ​

部分功能示例，具体可参考示例程序以及文档API。

基础用法 ​

默认为手风琴模式，打开一个面板时，其他面板会自动关闭，可以将 fu-collapse 的 accordion 属性设置为 false 来关闭手风琴模式，这样可以允许打开多个面板。

html
<fu-collapse>
    <fu-collapse-item padding="0" title="默认开启" :open="true">
        <text class="fu-l-h-96">折叠内容</text>
    </fu-collapse-item>
    <fu-collapse-item padding="0" title="折叠内容">
        <text class="fu-l-h-96">折叠内容</text>
    </fu-collapse-item>
    <fu-collapse-item padding="0" title="禁用状态" disabled>
        <text class="fu-l-h-96">折叠内容</text>
    </fu-collapse-item>
</fu-collapse>

手风琴模式 ​

通过 accordion 属性开启手风琴模式，只能打开一个面板，其他面板会自动关闭。

html
<fu-collapse accordion>
    <fu-collapse-item padding="0" title="手风琴效果">
        <text class="fu-l-h-96">折叠内容</text>
    </fu-collapse-item>
    <fu-collapse-item padding="0" title="手风琴效果">
        <text class="fu-l-h-96">折叠内容</text>
    </fu-collapse-item>
    <fu-collapse-item padding="0" title="禁用状态" disabled>
        <text class="fu-l-h-96">折叠内容</text>
    </fu-collapse-item>
</fu-collapse>

配置图片 ​

通过 thumb 属性配置图片，可以显示在折叠面板的左侧。

html
<fu-collapse accordion>
    <fu-collapse-item padding="0" title="标题文字" thumb="https://img1.baidu.com/it/u=1378138503,1063416067&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300">
        <text class="fu-l-h-96">折叠内容主体，可自定义内容及样式</text>
    </fu-collapse-item>
</fu-collapse>

自定义插槽 ​

html
<fu-collapse accordion>
    <fu-collapse-item padding="0" titleBorder="none" :border="false">
        <template v-slot:title>
            <view class="fu-font-24 fu-color-999999" slot="desc">使用了自定义插槽</view>
        </template>
        <text class="fu-l-h-96">折叠内容主体，可自定义内容及样式</text>
    </fu-collapse-item>
</fu-collapse>

开启动画 ​

通过 showAnimation 属性开启开启动画，可以让折叠面板展开/收起时有动画效果。

注：App 端默认关闭组件动画 ，因为 height 动画开销比较大，会导致页面卡顿，请酌情使用动画，如出现明显卡顿，尝试关闭动画

html
<fu-collapse>
    <fu-collapse-item padding="0" :showAnimation="true" title="开启动画">
        <text class="fu-l-h-96">折叠内容</text>
    </fu-collapse-item>
    <fu-collapse-item padding="0" :showAnimation="true" title="开启动画">
        <text class="fu-l-h-96">折叠内容</text>
    </fu-collapse-item>
    <fu-collapse-item padding="0" :showAnimation="false" title="不开启动画">
        <text class="fu-l-h-96">折叠内容</text>
    </fu-collapse-item>
</fu-collapse>

API ​

Collapse Props ​

属性名说明类型默认值可选值
accordion是否开启手风琴模式Booleanfalsetrue
bgColor自定义背景色String#FFFFFF-

Collapse Events ​

事件名说明回调参数
change切换面板时触发() => void

Collapse Methods ​

注意：此方法需要通过 ref 调用

方法名说明
init重新初始化内部高度计算，用于异步获取内容的情形，请结合 nextTick() 使用

Collapse Slot ​

名称说明
default默认插槽，用来放置 CollapseItem 组件

CollapseItem Props ​

属性名说明类型默认值可选值
title标题String--
thumb左侧图片String--
name标识符，可以用来设置当前项的唯一值String｜Number--
open是否打开Booleanfalsetrue
titleBorder标题边框String--
border是否显示边框Booleantruetrue
disabled是否禁用Booleanfalsetrue
showAnimation是否显示动画Booleanfalsetrue
showArrow是否显示箭头Booleantruefalse
bgColor自定义背景色String#FFFFFF-
padding自定义内边距String'0 30rpx'-

CollapseItem Slot ​

名称说明
title自定义标题
default默认插槽，用来放置内容