# Collapse 折叠面板 ## 基本使用 `value` 为绑定值，可以为 array 类型（普通折叠）、 string 类型（手风琴）和 boolean 类型（收起展开查看更多）。CollapseItem 的 `title` 和 `name` 为必填。`name` 用于标识该折叠栏。 ##由于微信小程序非双向绑定，因此需要事件手动赋值到当前页面## ```javascript page({ data: { value: [ 'item1' ] }, handleChange (event) { this.setData({ value: event.detail.value }) } }) ``` ```html 这是一条简单的示例文字。 这是一条简单的示例文字。 这是一条简单的示例文字。 ``` ## 手风琴 设置 `accordion` 属性。 ```html 这是一条简单的示例文字。 这是一条简单的示例文字。 这是一条简单的示例文字。 ``` ## 禁用 给 CollapseItem 设置 `disabled` 属性，禁用某个折叠栏。 ```html 这是一条简单的示例文字。 这是一条简单的示例文字。 这是一条简单的示例文字。 ``` ## 查看更多 Collapse 可以单独使用，通过设置 `viewmore` 属性，将其转化为查看更多的折叠类型，同时可以设置 `line-num` 修改收起时的显示行数。这时候的 `value` 为 boolean 类型。 ```html 这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。 ``` ## 查看更多-使用插槽 Collapse 查看更多的模式下，可以使用插槽定义自己想要的折叠处样式，使用 `use-more-slot` 设置插槽开启。并且可以使用外部样式类 `custom-more-slot-class` 为自定义插槽设置样式。 ```css .more-slot{ color: red; } ``` ```html 具名插槽：这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。 显示全部 ``` ## CollapseItem Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | |-----|------|-----|-------|-------|--------| | name | 折叠栏的标识符 | string | - | - | - | | title | 折叠栏的标题 | string | - | - | - | | disabled | 禁用折叠栏 | boolean | - | false | - | ## Collapse Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | |-----|------|-----|-------|-------|--------| | value | 绑定值 | string / array / boolean | - | - | - | | accordion | 手风琴 | boolean | - | false | - | | viewmore | 查看更多的折叠面板 | boolean | - | false | - | | useMoreSlot | 查看更多的自定义插槽使用标志 | boolean | - | false | - | | line-num | 查看更多的折叠面板，收起时的显示行数 | number | - | 2 | - | ## Collapse Events | 事件名称 | 说明 | 参数 | 最低版本 | |---------|-----|-----|---------| | bind:change | 绑定值变化时触发 | event.detail = { value } | - | ## Collapse Slot | name | 说明 | 最低版本 | |------|-----|---------| | more | 查看更多，便于开发者自定义查看更多类型的展开收起样式 | - | ## CollapseItem 外部样式类 | 类名 | 说明 | 最低版本 | |-----|------|--------| | custom-class | collapseItem根结点样式 | - | **注意：组件内插槽样式不生效，因此使用插槽时需注意添加外部样式类** ## Collapse 外部样式类 | 类名 | 说明 | 最低版本 | |-----|-----|---------| | custom-class | collapse根结点样式 | - | | custom-more-slot-class | 查看更多模式下的插槽外部自定义样式 | - |