Collapse 折叠面板

介绍

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

引入

app.jsonindex.json中引入组件,详细介绍见快速上手

  1. "usingComponents": {
  2. "van-collapse": "@vant/weapp/collapse/index",
  3. "van-collapse-item": "@vant/weapp/collapse-item/index"
  4. }

代码演示

基础用法

通过value控制展开的面板列表,activeNames为数组格式。

  1. <van-collapse value="{{ activeNames }}" bind:change="onChange">
  2. <van-collapse-item title="有赞微商城" name="1">
  3. 提供多样店铺模板,快速搭建网上商城
  4. </van-collapse-item>
  5. <van-collapse-item title="有赞零售" name="2">
  6. 网店吸粉获客、会员分层营销、一机多种收款,告别经营低效和客户流失
  7. </van-collapse-item>
  8. <van-collapse-item title="有赞美业" name="3" disabled>
  9. 线上拓客,随时预约,贴心顺手的开单收银
  10. </van-collapse-item>
  11. </van-collapse>
  1. Page({
  2. data: {
  3. activeNames: ['1'],
  4. },
  5. onChange(event) {
  6. this.setData({
  7. activeNames: event.detail,
  8. });
  9. },
  10. });

手风琴

通过accordion可以设置为手风琴模式,最多展开一个面板,此时activeName为字符串格式。

  1. <van-collapse accordion value="{{ activeName }}" bind:change="onChange">
  2. <van-collapse-item title="有赞微商城" name="1">
  3. 提供多样店铺模板,快速搭建网上商城
  4. </van-collapse-item>
  5. <van-collapse-item title="有赞零售" name="2">
  6. 网店吸粉获客、会员分层营销、一机多种收款,告别经营低效和客户流失
  7. </van-collapse-item>
  8. <van-collapse-item title="有赞美业" name="3">
  9. 线上拓客,随时预约,贴心顺手的开单收银
  10. </van-collapse-item>
  11. </van-collapse>
  1. Page({
  2. data: {
  3. activeName: '1',
  4. },
  5. onChange(event) {
  6. this.setData({
  7. activeName: event.detail,
  8. });
  9. },
  10. });

事件监听

van-collapse 提供了 change, openclose 事件。change 事件在面板切换时触发,open 事件在面板展开时触发,close 事件在面板关闭时触发。

  1. <van-collapse
  2. value="{{ activeNames }}"
  3. bind:change="onChange"
  4. bind:open="onOpen"
  5. bind:close="onClose"
  6. >
  7. <van-collapse-item title="有赞微商城" name="1">
  8. 提供多样店铺模板,快速搭建网上商城
  9. </van-collapse-item>
  10. <van-collapse-item title="有赞零售" name="2">
  11. 网店吸粉获客、会员分层营销、一机多种收款,告别经营低效和客户流失
  12. </van-collapse-item>
  13. <van-collapse-item title="有赞美业" name="3">
  14. 线上拓客,随时预约,贴心顺手的开单收银
  15. </van-collapse-item>
  16. </van-collapse>
  1. Page({
  2. data: {
  3. activeNames: ['1'],
  4. },
  5. onChange(event) {
  6. this.setData({
  7. activeNames: event.detail,
  8. });
  9. },
  10. onOpen(event) {
  11. Toast(`展开: ${event.detail}`);
  12. },
  13. onClose(event) {
  14. Toast(`关闭: ${event.detail}`);
  15. },
  16. });

自定义标题内容

  1. <van-collapse value="{{ activeNames }}" bind:change="onChange">
  2. <van-collapse-item name="1">
  3. <view slot="title">有赞微商城<van-icon name="question-o" /></view>
  4. 提供多样店铺模板,快速搭建网上商城
  5. </van-collapse-item>
  6. <van-collapse-item title="有赞零售" name="2" icon="shop-o">
  7. 网店吸粉获客、会员分层营销、一机多种收款,告别经营低效和客户流失
  8. </van-collapse-item>
  9. </van-collapse>
  1. Page({
  2. data: {
  3. activeNames: ['1'],
  4. },
  5. onChange(event) {
  6. this.setData({
  7. activeNames: event.detail,
  8. });
  9. },
  10. });

API

Collapse Props

参数说明类型默认值版本
value当前展开面板的 name非手风琴模式:(string | number)[]
手风琴模式:string | number
--
accordion是否开启手风琴模式booleanfalse-
border是否显示外边框booleantrue-

Collapse Event

事件名说明参数
change切换面板时触发activeNames: string | Array
open展开面板时触发currentName: string | number
close关闭面板时触发currentName: string | number

CollapseItem Props

参数说明类型默认值版本
name唯一标识符,默认为索引值string | numberindex-
title标题栏左侧内容string | number--
icon标题栏左侧图标名称或图片链接,可选值见 Icon 组件string--
value标题栏右侧内容string | number--
label标题栏描述信息string--
border是否显示内边框booleantrue-
is-link是否展示标题栏右侧箭头并开启点击反馈booleantrue-
clickable是否开启点击反馈booleanfalse-
disabled是否禁用面板booleanfalse-

CollapseItem Slot

名称说明
-面板内容
value自定义显示内容
icon自定义icon
title自定义title
right-icon自定义右侧按钮,默认是arrow

Collapse 外部样式类

类名说明
custom-class根节点样式类

CollapseItem 外部样式类

类名说明
custom-class根节点样式类
content-class内容样式类

Collapse 折叠面板 - 图1