×
13518219792

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

创新互联百度小程序教程：collapse折叠面板

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

否

展开收起触发事件，e.spread展开收起状态

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例 1：默认

 
 
 
    
  
  
  
    2.   
  
  
  2.  list="{{item.list}}"
    3.   
  
  
  3.  title="{{item.title}}"
    4.   
  
  
  4.  spread="{{item.spread}}"
    5.   
  
  
  5.  sub-title="{{item.subTitle}}"
    6.   
  
  
  6.  header-type="{{item.headerType}}"
    7.   
  
  
  7.  animation-time="{{item.animationTime}}"
    8.   
  
  
  8.  bind:spread="spread"
    9.   
  
  
  9.  smt-header-title="smt-header-title"
    10.   
  
  
  10.  smt-header-sub-title="smt-header-sub-title"
    11.   
  
  
  11.  smt-content-box="smt-content-box"
    12.   
  
  
  12.  smt-content-item="smt-content-item"
    13.   
  
  
  13. >
    14.

代码示例 2：使用 slot

  • SWAN
  • JS
  • CSS
  • JSON
 
 
 
    
  
  
  
    2.   
  
  
  2.  spread="{{slot.spread}}"
    3.   
  
  
  3.  spread-height="{{slot.spreadHeight}}"
    4.   
  
  
  4.  header-type="{{slot.headerType}}"
    5.   
  
  
  5.  animation-time="{{slot.animationTime}}"
    6.   
  
  
  6.  bind:spread="spread"
    7.   
  
  
  7. >
    8.   
  
  
  8.  插槽内容
    9.   
  
  
  9.  
    10.   
  
  
  10.  {{item.label}}
    11.   
  
  
  11.  
    12.   
  
  
    13.

网站栏目：创新互联百度小程序教程：collapse折叠面板
网页路径：http://cdbrznjsb.com/article/cdsgccs.html

其他资讯

  • 网站建设专属方案

  • 网站定制化设计

  • 7X24小时服务

  • N对管家服务

让你的专属顾问为你服务