TreeSelect 分类选择

使用指南

在 app.json 或 index.json 中引入组件

  1. "usingComponents": {
  2.   "van-tree-select": "path/to/vant-weapp/dist/tree-select/index"
  3. }

代码演示

可以在任意位置上使用 van-tree-select 标签。传入对应的数据即可。

  1. <van-tree-select
  2.   items="{{ items }}"
  3.   main-active-index="{{ mainActiveIndex }}"
  4.   active-id="{{ activeId }}"
  5.   bind:click-nav="onClickNav"
  6.   bind:click-item="onClickItem"
  7. />
  1. Page({
  2.   data: {
  3.     // ...
  4.   },
  6.   onClickNav({ detail = {} }) {
  7.     this.setData({
  8.       mainActiveIndex: detail.index || 0
  9.     });
  10.   },
  12.   onClickItem({ detail = {} }) {
  13.     this.setData({
  14.       activeId: detail.id
  15.     });
  16.   }
  17. });

API

参数说明类型默认值必须
items分类显示所需的数据，具体数据结构可看 数据结构Array[]
main-active-index左侧导航高亮的索引Number0
active-id右侧选择项，高亮的数据idStringNumber0

Event

事件名说明回调参数
bind:click-nav左侧导航点击时，触发的事件event.detail.index：被点击的导航的索引
bind:click-item右侧选择项被点击时，会触发的事件event.detail: 该点击项的数据

数据格式

items 分类显示所需数据的数据结构

items 整体为一个数组，数组内包含一系列描述分类的对象

每个分类里，text 表示当前分类的名称。children 表示分类里的可选项，为数组结构，id 被用来唯一标识每个选项

  1. [
  2.   {
  3.     // 导航名称
  4.     text: '所有城市',
  5.     // 禁用选项
  6.     disabled: false,
  7.     // 该导航下所有的可选项
  8.     children: [
  9.       {
  10.         // 名称
  11.         text: '温州',
  12.         // id，作为匹配选中状态的标识
  13.         id: 1,
  14.         // 禁用选项
  15.         disabled: true
  16.       },
  17.       {
  18.         text: '杭州',
  19.         id: 2
  20.       }
  21.     ]
  22.   }
  23. ]

外部样式类

类名说明
main-item-class左侧选项样式类
content-item-class右侧选项样式类
main-active-class左侧选项选中样式类
content-active-class右侧选项选中样式类
main-disabled-class左侧选项禁用样式类
content-disabled-class右侧选项禁用样式类

更新日志

版本类型内容
0.0.1feature新增组件

原文: https://youzan.github.io/vant-weapp/#/tree-select