级联 Cascade

用于联动选择。

使用

API

安装使用

{
  // 原生小程序
  "usingComponents": {
    "ti-cascade": "@titian-design/weapp/cascade/index"
  },
  // titan-cli搭建的项目
  "usingComponents": {
    "ti-cascade": "platform://titian-mp/ti-cascade"
  }
}

用法示例

静态数据

弹出选择器

• App.wxml
• index.js

code

copy

code

<ti-cascade code="code" label="name" cascade="children" tabs="{{tabs}}" options="{{options}}" />

copy

code

Page({
  data: {
    tabs: ['省', '市', '区/县'],
    options: [
      {
        code: '310000',
        name: '上海市',
        children: [
          {
            code: '310100',
            name: '直辖市',
            children: [
              {
                code: '310101',
                name: '黄浦区',
              },
            ],
          },
        ],
      },
      {
        code: '330000',
        name: '浙江省',
        children: [
          {
            code: '330100',
            name: '杭州市',
            children: [
              {
                code: '330102',
                name: '上城区',
              },
              {
                code: '330105',
                name: '拱墅区',
              },
            ],
          },
        ],
      },
    ],
  },
});

动态数据

备注

给 getOptions 属性传入一个异步接口，有 3 种做法：

1. 该接口返回全部层级的数据。
2. 该接口可以返回单层数据；选择时，会再次调用该接口，获取下一层级数据。
3. 该接口可以搭配静态 options 数据；当在 options 内找不到下一层数据时，会尝试调用 getOptions 接口，拿到下一层级数据。

• index.wxml
• index.js

code

<ti-cascade tabs="{{ tab }}"  options="{{options}}" get-options="asyncGetOptionAPI" />

Page({
  data: {
    tabs: ['省', '市', '区/县'],
    asyncGetOptionAPI: async (value: any) => {
      let rawResponse;
      if (value) {
        rawResponse = await fetch('api3/address/tmp/getAreasByCityId', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({ areaCode: value.areaCode }),
        });
      } else {
        rawResponse = await fetch('api3/address/tmp/getProvinceCity', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({}),
        });
      }
      const { data } = await rawResponse.json();
      return data;
    }
  }
});

ti-cascade API

属性 Properties

名称	类型	必填	默认值	说明	备注
titlebar	boolean	否	true		-
title	string	否	'选择地址'	标题	-
sub-title	string	否	-	副标题	-
code	string	否	'code'	指定列标识	-
label	string	否	'label'	指定文案字段	-
value	array	否	[]	值	-
options	{ [key: string | number]: unknown }[]	否	[]	数据源	-
active	number	否	0	当前展示项	-
get-options	function	否	-	获取列数据	-
cascade	string	否	children	级联字段	-
ext-header-style	string | Record<string, string>	否		header 样式	-
ext-tab-style	string | Record<string, string>	否		tab 样式	-
ext-option-item-style	string | Record<string, string>	否		当前项样式	-

事件 Events

名称	参数列表	描述	备注
bind:change	e: WechatMiniprogram.CustomEvent<{ value: unknown[]; options: CascadeOption[];active: number;}> => void	当前选中项，见 级联项 CascadeOption	-
bind:changeSwiper	`e: WechatMiniprogram.CustomEvent<{ current: number; source: 'touch'	'';}> => void`	切换当前活动项目
close		关闭	-

CSS 变量 CSS Variable

变量	默认值	说明
--cascade-header-padding-v	theme.spacing.vertical.v0	header 垂直方向的内边距
--cascade-header-padding-h	theme.spacing.horizontal.h3	header 水平方向的内边距
--cascade-tab-padding-v	theme.spacing.vertical.v7	tab 垂直方向的内边距
--cascade-tab-padding-h	theme.spacing.horizontal.h7	tab 水平方向的内边距
--cascade-tab-font-size	theme.fontSize.t6	tab 字体大小
--cascade-tab-color	theme.color.gray.texticon.250	tab 字体颜色
--cascade-tab-line-height	theme.lineHeight.multiline.t2	tab 文字行高
--cascade-tab-selected-color	theme.color.gray.texticon.550	tab 选中字体颜色
--cascade-tab-active-color	theme.color.gray.texticon.900	tab 活动状态字体颜色
--cascade-tab-active-font-weight	theme.fontWeight.semibold	tab 活动状态字体 weight
--cascade-content-height	750rpx	内容区高度
--cascade-item-padding-v	theme.spacing.vertical.v8	内容区单项垂直方向的内边距
--cascade-item-padding-h	theme.spacing.horizontal.h10	内容区单项水平方向的内边距
--cascade-item-font-size	theme.fontSize.t6	内容区单项字体大小
--cascade-item-font-weight	theme.fontWeight.regular	内容区单项字体 weight
--cascade-item-color	theme.color.gray.texticon.900	内容区单项字体颜色
--cascade-item-checkbox-checked-color	theme.color.brand.1000	每一个具体地址选项，选中后右侧对勾颜色