You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
3.7 KiB
107 lines
3.7 KiB
4 years ago
|
|
||
|
|
|
||
|
|
## Collapse 折叠面板
|
||
|
|
> 代码块： `uCollapse`
|
||
|
|
> 关联组件：`uni-collapse-item`、`uni-icons`。
|
||
|
|
|
||
|
|
|
||
|
|
展示可以折叠 / 展开的内容区域。
|
||
|
|
|
||
|
|
### 安装方式
|
||
|
|
|
||
|
|
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
|
||
|
|
|
||
|
|
如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
|
||
|
|
|
||
|
|
### 基本用法
|
||
|
|
|
||
|
|
在 ``template`` 中引用组件
|
||
|
|
|
||
|
|
```html
|
||
|
|
<!-- 一般用法 -->
|
||
|
|
<uni-collapse @change="change">
|
||
|
|
<uni-collapse-item title="标题文字">
|
||
|
|
<uni-list>
|
||
|
|
<uni-list-item title="标题文字" thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"></uni-list-item>
|
||
|
|
<uni-list-item title="标题文字" note="描述信息" thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"></uni-list-item>
|
||
|
|
<uni-list-item title="标题文字" note="描述信息" show-extra-icon="true" :extra-icon="{color: '#4cd964',size: '22',type: 'spinner'}"></uni-list-item>
|
||
|
|
</uni-list>
|
||
|
|
</uni-collapse-item>
|
||
|
|
<uni-collapse-item title="默认开启" open="true">
|
||
|
|
<view style="padding: 30rpx;"> 折叠内容主体，可自定义内容及样式 </view>
|
||
|
|
</uni-collapse-item>
|
||
|
|
<uni-collapse-item title="禁用状态" disabled="true">
|
||
|
|
<view style="padding: 30rpx;"> 禁用状态 </view>
|
||
|
|
</uni-collapse-item>
|
||
|
|
</uni-collapse>
|
||
|
|
|
||
|
|
<!-- 手风琴效果 -->
|
||
|
|
<uni-collapse accordion="true">
|
||
|
|
<uni-collapse-item title="标题文字">
|
||
|
|
<view style="padding: 30rpx;">
|
||
|
|
手风琴效果
|
||
|
|
</view>
|
||
|
|
</uni-collapse-item>
|
||
|
|
<uni-collapse-item title="标题文字">
|
||
|
|
<view style="padding: 30rpx;">
|
||
|
|
手风琴效果
|
||
|
|
</view>
|
||
|
|
</uni-collapse-item>
|
||
|
|
<uni-collapse-item title="标题文字">
|
||
|
|
<view style="padding: 30rpx;">
|
||
|
|
手风琴效果
|
||
|
|
</view>
|
||
|
|
</uni-collapse-item>
|
||
|
|
</uni-collapse>
|
||
|
|
|
||
|
|
<!-- 带图标 -->
|
||
|
|
<uni-collapse>
|
||
|
|
<uni-collapse-item title="标题文字" thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png">
|
||
|
|
<view style="padding: 30rpx;">
|
||
|
|
折叠内容主体，可自定义内容及样式
|
||
|
|
</view>
|
||
|
|
</uni-collapse-item>
|
||
|
|
<uni-collapse-item title="标题文字" thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png">
|
||
|
|
<view style="padding: 30rpx;">
|
||
|
|
折叠内容主体，可自定义内容及样式
|
||
|
|
</view>
|
||
|
|
</uni-collapse-item>
|
||
|
|
</uni-collapse>
|
||
|
|
```
|
||
|
|
|
||
|
|
## API
|
||
|
|
|
||
|
|
### Collapse Props
|
||
|
|
|
||
|
|
|属性名 |类型 |默认值 |说明 |
|
||
|
|
|:-: |:-: |:-: |:-: |
|
||
|
|
|accordion |Boolean|false |是否开启手风琴效果 |
|
||
|
|
|
||
|
|
|
||
|
|
### Collapse Event
|
||
|
|
|
||
|
|
|事件称名 |说明 |返回值 |
|
||
|
|
|:-: |:-: :-: |
|
||
|
|
|@change |切换面板时触发 |activeNames（Array）：展开状态的uniCollapseItem的name值|
|
||
|
|
|
||
|
|
|
||
|
|
### Collapse Methods
|
||
|
|
|
||
|
|
|方法名称 |说明 |
|
||
|
|
|:-: |:-: |
|
||
|
|
|resize |更新当前列表高度，只有 `animation:true` 下生效|
|
||
|
|
|
||
|
|
|
||
|
|
> - resize 方法解决动态添加数据，带动画的折叠面板高度不更新的问题
|
||
|
|
> - 需要在数据渲染完毕之后使用 `resize` 方法。推荐在 `this.nextTick()` 中使用
|
||
|
|
|
||
|
|
|
||
|
|
### CollapseItem Props
|
||
|
|
|
||
|
|
|属性名 |类型 |默认值 |说明 |
|
||
|
|
|:-: |:-: |:-: |:-: |
|
||
|
|
|title |String |- |标题文字 |
|
||
|
|
|thumb |String |- |标题左侧缩略图 |
|
||
|
|
|disabled |Boolean|false |是否禁用 |
|
||
|
|
|open |Boolean|false |是否展开面板 |
|
||
|
|
|showAnimation |Boolean |false |开启动画 |
|