返回

uni-app Picker选择器的省市区多级联动选择实现

前端

uni-app：实现省市区多级联动选择

准备工作

为了实现省市区多级联动选择，我们需要进行一些数据准备工作。首先，我们需要一个省市区数据源。我们可以从网上找到许多这样的数据源，例如 省市区数据源。

接下来，我们需要将数据源中的数据转换为 uni-app picker 选择器可以识别的格式。我们可以使用以下代码片段进行转换：

let provinceList = [];
let cityList = [];
let areaList = [];

for (let i in data) {
  provinceList.push({
    value: data[i].code,
    label: data[i].name
  });

  for (let j in data[i].cityList) {
    cityList.push({
      value: data[i].cityList[j].code,
      label: data[i].cityList[j].name
    });

    for (let k in data[i].cityList[j].areaList) {
      areaList.push({
        value: data[i].cityList[j].areaList[k].code,
        label: data[i].cityList[j].areaList[k].name
      });
    }
  }
}

实现省市区多级联动选择

数据准备就绪后，我们就可以开始实现省市区多级联动了。首先，我们在页面中定义三个 picker 选择器：

<picker mode="multiSelector" range="{{provinceList}}" bindchange="bindChangeProvince"></picker>
<picker mode="multiSelector" range="{{cityList}}" bindchange="bindChangeCity"></picker>
<picker mode="multiSelector" range="{{areaList}}" bindchange="bindChangeArea"></picker>

接下来，我们需要为这些选择器绑定事件。当用户选择一个省份时，城市和地区列表将自动更新。当用户选择一个城市时，地区列表也将自动更新。我们可以使用以下代码片段实现这个功能：

methods: {
  bindChangeProvince(e) {
    console.log(e.detail.value);
    let cityList = [];
    let areaList = [];

    for (let i in this.data.provinceList) {
      if (this.data.provinceList[i].value == e.detail.value[0]) {
        for (let j in this.data.provinceList[i].cityList) {
          cityList.push({
            value: this.data.provinceList[i].cityList[j].code,
            label: this.data.provinceList[i].cityList[j].name
          });

          for (let k in this.data.provinceList[i].cityList[j].areaList) {
            areaList.push({
              value: this.data.provinceList[i].cityList[j].areaList[k].code,
              label: this.data.provinceList[i].cityList[j].areaList[k].name
            });
          }
        }
      }
    }

    this.setData({
      cityList: cityList,
      areaList: areaList
    });
  },

  bindChangeCity(e) {
    console.log(e.detail.value);
    let areaList = [];

    for (let i in this.data.cityList) {
      if (this.data.cityList[i].value == e.detail.value[0]) {
        for (let j in this.data.cityList[i].areaList) {
          areaList.push({
            value: this.data.cityList[i].areaList[j].code,
            label: this.data.cityList[i].areaList[j].name
          });
        }
      }
    }

    this.setData({
      areaList: areaList
    });
  },

  bindChangeArea(e) {
    console.log(e.detail.value);
  }
}

结语

通过本文，我们了解了如何在 uni-app 中实现省市区多级联动选择。这个功能可以大大提高用户在选择地址时的便利性，广泛应用于电商、物流等需要用户输入地址信息的场景。

常见问题解答

  1. 如何获取省市区数据源？

  2. 如何修改选择器的外观？

    • 您可以通过设置 custom-item 属性来修改选择器的外观。例如，您可以使用以下代码片段设置每个选项的高度：
    <picker mode="multiSelector" range="{{provinceList}}" bindchange="bindChangeProvince" custom-item="{{customItem}}">

    .custom-item {
  height: 50px;
}

  3. 如何禁用某些选项？

    • 您可以通过设置 disabled 属性来禁用某些选项。例如，以下代码片段禁用了省份列表中的第一个选项：
    <picker mode="multiSelector" range="{{provinceList}}" bindchange="bindChangeProvince">
  <view class="picker-view">
    <picker-view-column>
      <picker-view-item value="{{provinceList[0].value}}" disabled></picker-view-item>
    </picker-view-column>
  </view>
</picker>

  4. 如何设置默认值？

    • 您可以通过设置 value 属性来设置默认值。例如，以下代码片段设置了省份列表的默认值为 "广东省"：
    <picker mode="multiSelector" range="{{provinceList}}" bindchange="bindChangeProvince" value="{{[0]}}">

  5. 如何获取选中的值？

    • 您可以通过监听 bindchange 事件来获取选中的值。例如，以下代码片段在控制台中打印了选中的值：
    bindChange(e) {
  console.log(e.detail.value);
}