# Collapse 折叠面板

概述

Collapse 折叠面板,可以折叠/展开的内容区域。
Collapse 提供了 fui-collapse 和 fui-collapse-item 两个组件,其中 fui-collapse-item 组件可独立使用,需要手风琴效果时结合 fui-collapse 组件一起使用。

# 引入

以下介绍两种常用的引入方式。
第一种:在页面json文件中引入
{
  "navigationBarTitleText": "折叠面板",
  "usingComponents": {
    "fui-collapse": "/components/firstui/fui-collapse/fui-collapse",
    "fui-collapse-item": "/components/firstui/fui-collapse-item/fui-collapse-item"
  }
}
1
2
3
4
5
6
7
第二种:在根目录app.json文件中全局引入
"usingComponents": {
    "fui-collapse": "components/firstui/fui-collapse/fui-collapse",
    "fui-collapse-item": "components/firstui/fui-collapse-item/fui-collapse-item"
}
1
2
3
4

# 代码演示

部分示例演示,完整使用请参考示例程序以及文档API。
基础使用

fui-collapse-item 组件可单独使用 ,bindchange 事件仅无父组件 fui-collapse 时生效。

<fui-collapse-item bindchange="change">
  <view class="fui-item__box">
	<image src="/static/images/common/logo.png" class="fui-logo"></image>
	<text>First UI</text>
  </view>
  <view class="fui-descr" slot="content">First UI 是一套基于微信小程序开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。</view>
</fui-collapse-item>
1
2
3
4
5
6
7
.fui-item__box {
	width: 100%;
	padding: 26rpx 32rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}

.fui-logo {
	width: 48rpx;
	height: 48rpx;
	margin-right: 24rpx;
	display: block;
}

.fui-descr {
	width: 100%;
	padding: 32rpx;
	font-size: 28rpx;
	line-height: 52rpx;
	color: #7F7F7F;
	word-break: break-all;
	box-sizing: border-box;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
默认展开

通过 index 属性设置折叠面板项索引或者唯一标识,open 属性设置是否展开。

<fui-collapse bindchange="change">
  <fui-collapse-item index="{{index}}" open="{{item.isOpen}}" wx:for="{{items}}" wx:key="index">
	<view class="fui-item__box">
	  <image src="{{item.src}}" class="fui-logo"></image>
	  <text>{{item.title}}</text>
	</view>
	<view slot="content" class="fui-descr" style="background-color: rgba(255, 183, 3, .1);">{{item.descr}}</view>
  </fui-collapse-item>
</fui-collapse>
1
2
3
4
5
6
7
8
9
items: [{
	src: '/static/images/common/logo.png',
	title: 'First UI',
	descr: 'First UI 是一套基于微信小程序开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。',
	isOpen: true
}, {
	src: '/static/images/common/icon_tabbar_2x.png',
	title: '标题内容',
	descr: '自定义折叠内容主体,这是一段比较长内容。默认折叠主要内容,只显示当前项标题。点击标题展开。再次点击标题,折叠内容。'
}]
1
2
3
4
5
6
7
8
9
10
手风琴效果

通过设置 fui-collapse 组件的 accordion 属性来控制是否为手风琴效果。

 <fui-collapse accordion bindchange="change">
  <fui-collapse-item index="{{index}}" wx:for="{{items}}" wx:key="index">
	<view class="fui-item__box">
	  <image src="{{item.src}}" class="fui-logo"></image>
	  <text>{{item.title}}</text>
	</view>
	<view slot="content" class="fui-descr" style="background-color: rgba(255, 183, 3, .1);">{{item.descr}}</view>
  </fui-collapse-item>
</fui-collapse>
1
2
3
4
5
6
7
8
9
items: [{
	src: '/static/images/common/logo.png',
	title: 'First UI',
	descr: 'First UI 是一套基于微信小程序开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。',
	isOpen: true
}, {
	src: '/static/images/common/icon_tabbar_2x.png',
	title: '标题内容',
	descr: '自定义折叠内容主体,这是一段比较长内容。默认折叠主要内容,只显示当前项标题。点击标题展开。再次点击标题,折叠内容。'
}]
1
2
3
4
5
6
7
8
9
10

# Slots

# fui-collapse 组件

插槽名称 说明
default 折叠面板内容,内部由多个 fui-collapse-item 组件组成

# fui-collapse-item 组件

名称 说明
default 折叠面板item项标题部分自定义内容
content 折叠面板item项折叠部分自定义内容

# Props

# fui-collapse 组件

属性名 类型 说明 默认值 其他说明
accordion Boolean 是否开启手风琴效果 false -
background V2.4.0+ String 背景色 transparent -

# fui-collapse-item 组件

属性名 类型 说明 默认值 其他说明
index Number, String item项索引或者唯一标识 0 -
disabled Boolean 是否禁用点击 false -
background String 标题内容背景色 #fff -
animation Boolean 是否显示动画,如果动画卡顿严重建议不开启 true -
open Boolean 是否展开 false -
isBorder Boolean 是否显示标题内容部分底部线条 true -
borderColor String 线条颜色 - 如果值为空,可通过css变量(--fui-color-border)来修改颜色值
borderLeft Number, String 线条距左侧偏移距离,单位rpx 0 -
arrow Boolean 是否显示箭头 true -
arrowColor String 箭头颜色 #B2B2B2 -
arrowRight Number, String 箭头距右侧偏移距离,单位rpx 24 -
contentBg String 折叠内容背景色 #fff -
marginTop V2.4.0+ Number, String margin-top值,单位rpx 0 -
marginBottom V2.4.0+ Number, String margin-bottom值,单位rpx 0 -

# Events

# fui-collapse 组件

事件名 说明 回调参数
bind:change 点击切换时触发 event.detail =
{
  index : item项索引或者唯一标识,
  isOpen : 是否展开
}

# fui-collapse-item 组件

该组件可独立使用,且bindchange事件仅独立使用(无父组件 fui-collapse)时有效。
事件名 说明 回调参数
bind:change 点击切换时触发(仅独立使用时生效) event.detail =
{
  index : item项索引或者唯一标识,
  isOpen : 是否展开
}

# Methods

通过 `this.selectComponent` 获取子组件的实例对象(调用时需要传入一个匹配选择器 selector),然后调用上面的实例方法。

# fui-collapse-item 组件

方法名 说明 传入参数
init 重新初始化组件内容高度,当内容为异步获取时需要延时调用此方法 -

示例预览

Last Updated: 5/30/2024, 10:36:22 AM