Area 省市区选择

引入

在或index.json中引入组件，详细介绍见。

基础用法

初始化省市区组件时，需要通过 area-list 属性传入省市区数据。

  1. <van-area area-list="{{ areaList }}" />

areaList 格式

areaList 为对象结构，包含 province_list、city_list、county_list 三个 key。

每项以地区码作为 key，省市区名字作为 value。地区码为 6 位数字，前两位代表省份，中间两位代表城市，后两位代表区县，以 0 补足 6 位。比如北京的地区码为 11，以 0 补足 6 位，为 110000。

示例数据如下：

  1. const areaList = {
  2.   province_list: {
  3.     120000: '天津市',
  4.   },
  5.   city_list: {
  6.     110100: '北京市',
  7.     120100: '天津市',
  8.   },
  9.   county_list: {
  10.     110101: '东城区',
  11.     110102: '西城区',
  12.     // ....
  13.   },
  14. };
  3. Page({
  4.   data: {
  5.     areaList,
  6.   },
  7. });

选中省市区

如果想选中某个省市区，需要传入一个value属性，绑定对应的省市区code。

    配置显示列

    可以通过columns-num属性配置省市区显示的列数，默认情况下会显示省市区，当你设置为2，则只会显示省市选择。

    配置列占位提示文字

    可以通过columns-placeholder属性配置每一列的占位提示文字。

    1. <van-area
    2.   area-list="{{ areaList }}"
    3.   columns-placeholder="{{ ['请选择', '请选择', '请选择'] }}"
    4.   title="标题"
    5. />

    实际项目中，可以通过的能力，将省市区数据保存在云开发的数据库中，并在小程序中使用云开发的接口异步获取数据。

    在小程序中使用云能力之前需要先调用wx.could.init方法完成云能力的初始化。

    1. const db = wx.cloud.database();
    3. db.collection('region')
    4.   .limit(1)
    5.   .get()
    7.     if (res.data && res.data.length > 0) {
    8.       this.setData({
    9.         areaList: res.data[0],
    10.       });
    11.     }
    12.   })
    13.   .catch((err) => {
    14.     console.log(err);

    Props

    Events

    方法

    返回的数据整体为一个 Object，包含 values, indexs 两个 key。

    values 整体为一个数组，数组内包含 columnsNum 个数据， 每个数据对应一列选项中被选中的数据。

    code 代表被选中的地区编码， name 代表被选中的地区名称。

    为一个数组，数组内包含 columnsNum 个数据， 每个数据对应一列选项中被选中项的序号。