Collapse 折叠面板

介绍

将内容放置在折叠面板中，点击面板的标题可以展开或收缩其内容。

引入

"usingComponents": {
  "m-collapse": "mind-ui-weapp/collapse/index"
}

示例

<m-collapse visible="{{ isShow }}" duraion="300">
	<view>
		注意：最外层 view 不可设置 `margin-top` 与 `margin-botton`，
		否则会影响组件内部高度计算，
		如有需要，请在包裹标签中设置。
	</view>
</m-collapse>

<m-button bind:click="handleCollapseSwitch">collapse 面板</m-button>

Page({
  data: {
    isShow: false,
  },

  handleCollapseSwitch() {
    this.setData({
      isShow: !this.data.isShow
    })
  }
})

Properties

参数	说明	类型	可选值	默认值
visible	是否展开折叠面板	Boolean	—	false
duration	动画时长(单位ms)	Number	—	300

Events

名称	说明	返回值
bind:change	折叠面板动画结束回调	面板开启/关闭对应的 Boolean 值

Slot

名称	说明
-	折叠面板内容