创新互联百度小程序教程：collapse折叠面板
- collapse 折叠面板
- 属性说明
- 示例
- 代码示例 1：默认
- 代码示例 2：使用 slot
collapse 折叠面板
解释：折叠面板，支持配置主标题文案和副标题文案，并可点击展开折叠面板查看更多内容。适用于信息展示，并可放置在页面的任何位置。
10年积累的网站制作、网站建设经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计制作后付款的网站建设流程，更有峨边彝族免费网站建设让你可以放心的选择与我们合作。
属性说明
| 属性名 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
|
headerType |
String |
否 |
vertical |
折叠面板 header 布局类型，horizontal 水平布局、vertical 上下布局 |
|
spread |
Boolean |
否 |
false |
展开收起状态，展开为 true，收起为 false |
|
onlySpreadByIcon |
Boolean |
否 |
false |
展开收起事件，是否仅绑定在icon上（是：true，否：false） |
|
title |
String |
是 |
header 主标题文案 |
|
|
subTitle |
String |
否 |
‘’ |
header 否标题文案 |
|
list |
Array |
是 |
展开面板内容列表 |
|
|
headerBorder |
Boolean |
否 |
true |
是否展示下边框 |
|
animationTime |
Number |
否 |
0 |
折叠面板展开收起动画时长（单位：ms） |
|
spreadHeight |
String |
否 |
1rpx |
收起时内容区的高度（单位：rpx） |
|
smt-collapse-header |
String |
否 |
提供扩展样式类，供开发者自定义组件样式。可通过此 class 修改header外层样式 |
|
|
smt-header-title |
String |
否 |
提供扩展样式类，供开发者自定义组件样式。可通过此 class 修改主标题样式 |
|
|
smt-header-sub-title |
String |
否 |
提供扩展样式类，供开发者自定义组件样式。可通过此 class 修改副标题样式 |
|
|
smt-content-box |
String |
否 |
提供扩展样式类，供开发者自定义组件样式。可通过此 class 修改展开面板外层样式 |
|
|
smt-content-item |
String |
否 |
提供扩展样式类，供开发者自定义组件样式。可通过此 class 修改展开面板每一项的样式 |
|
|
spread |
EventHandle |
否 |
展开收起触发事件， |
示例
跳转编辑工具
在开发者工具中打开
在 WEB IDE 中打开
扫码体验
代码示例
请使用百度APP扫码
代码示例 1：默认
- SWAN
- JS
- CSS
- JSON
list="{{item.list}}"title="{{item.title}}"spread="{{item.spread}}"sub-title="{{item.subTitle}}"header-type="{{item.headerType}}"animation-time="{{item.animationTime}}"bind:spread="spread"smt-header-title="smt-header-title"smt-header-sub-title="smt-header-sub-title"smt-content-box="smt-content-box"smt-content-item="smt-content-item">
代码示例 2：使用 slot
- SWAN
- JS
- CSS
- JSON
spread="{{slot.spread}}"spread-height="{{slot.spreadHeight}}"header-type="{{slot.headerType}}"animation-time="{{slot.animationTime}}"bind:spread="spread">插槽内容 {{item.label}}
网页题目：创新互联百度小程序教程：collapse折叠面板
本文路径：http://www.zsjierui.cn/article/cdsgccs.html