fs-weapp/collapse

Collapse 折叠面板

使用指南

  • 确保 components 下引入behavors/miniprogram-computed.js, icon组件, card、collapse、collapse-group组件
  • 在 app.json 或 index.json 中引入组件

{
  "usingComponents": {
    "fs-collapse": "../../components/collapse/index",
    "fs-collapse-group": "../../components/collapse-group/index"
  }
}
1
2
3
4
5
6
7

代码演示

  • 普通
<fs-collapse-group value="{{value1}}" data-key="value1" bind:change="onChange">
  <fs-collapse title="标题一" name="a" bindtoggle="toggle">
    <button>按钮一</button>
  </fs-collapse>
  <fs-collapse title="标题二" name="b" bindtoggle="toggle">
    <button>按钮二</button>
  </fs-collapse>
  <fs-collapse name="c" bindtoggle="toggle">
    <text slot="title">标题三</text>
    <button>按钮三</button>
  </fs-collapse>
</fs-collapse-group>
1
2
3
4
5
6
7
8
9
10
11
12
  • 单个展开
<fs-collapse-group value="{{value2}}" data-key="value2" bind:change="onChange" custom-class="demo" single>
  <fs-collapse title="标题一" bindtoggle="toggle">
    <button>按钮一</button>
  </fs-collapse>
  <fs-collapse title="标题二" bindtoggle="toggle">
    <button>按钮二</button>
  </fs-collapse>
  <fs-collapse bindtoggle="toggle" disabled>
    <text slot="title">标题三</text>
    <button>按钮三</button>
  </fs-collapse>
</fs-collapse-group>
1
2
3
4
5
6
7
8
9
10
11
12
Page({
  data: {
    value1: [],
    value2: null
  },
  onChange (e) {
    const { key } = e.currentTarget.dataset
    this.setData({
      [key]: e.detail
    })
  }
})
1
2
3
4
5
6
7
8
9
10
11
12

CollapseGroup

属性

参数 说明 类型 默认值
custom-class 外部样式 String -
single 是否只能展开一个，默认不启用，v-model需要绑定数组。 Boolean -

插槽

插槽名 说明
- 默认内容

Collapse

属性

参数 说明 类型 默认值
custom-class 外部样式 String -
disabled 是否disable Boolen -
title 标题 Boolen -
title-img 标题前的图片地址 String -
name 名称 String Number

插槽

插槽名 说明
- 展开的内容
title 自定义标题

事件

event 说明 返回值
toggle  toggle 事件 name

← Card 卡片 →