uniapp如何实现省市区三级联动

在uniapp中如何实现省市区三级联动功能？需要用到哪些组件或插件？有没有现成的数据源可以直接调用？希望能提供一个简单的示例代码，最好能兼容H5和小程序端。

2 回复

使用uniapp实现省市区三级联动，可通过以下步骤：

  1. 引入省市区数据（如阿里云地址库）
  2. 使用picker组件，设置mode=“region”
  3. 监听picker的change事件获取选择结果
  4. 或自定义三级picker，通过数据联动实现

示例代码：

<picker mode="region" @change="onRegionChange">
  <view>{{regionText}}</view>
</picker>

在 UniApp 中实现省市区三级联动，可以通过以下步骤完成，核心是使用 <picker> 组件和动态数据绑定。以下是详细方法和示例代码：

实现步骤：

  1. 准备数据：使用静态 JSON 数据或调用 API 获取省市区数据（推荐静态 JSON 文件，简单高效）。
  2. 使用 <picker> 组件：设置 mode="multiSelector" 实现多列选择。
  3. 动态更新数据：根据用户选择的省、市，动态更新市和区的选项。

示例代码：

假设你有一个 regionData.js 文件存储省市区数据（结构为省列表，每个省包含市列表，每个市包含区列表）。

1. 在 Vue 文件中：

<template>
  <view>
    <picker mode="multiSelector" :range="multiArray" :value="multiIndex" @change="onPickerChange" @columnchange="onColumnChange">
      <view>当前选择：{{ selectedRegion }}</view>
    </picker>
  </view>
</template>

<script>
import regionData from './regionData.js'; // 导入省市区数据

export default {
  data() {
    return {
      multiArray: [[], [], []], // 初始化省、市、区数据
      multiIndex: [0, 0, 0], // 当前选中的索引
      selectedRegion: '请选择省市区' // 显示选择结果
    };
  },
  mounted() {
    this.initPickerData(); // 初始化数据
  },
  methods: {
    // 初始化省数据
    initPickerData() {
      const provinces = regionData.map(item => item.name);
      const cities = regionData[0].children.map(item => item.name);
      const districts = regionData[0].children[0].children.map(item => item.name);
      
      this.multiArray = [provinces, cities, districts];
    },

    // 列数据变化时触发（滑动选择）
    onColumnChange(e) {
      const { column, value } = e.detail; // 列索引和值索引
      const newIndex = [...this.multiIndex];
      newIndex[column] = value;

      // 根据列变化更新数据
      if (column === 0) { // 省变化
        const cities = regionData[value].children.map(item => item.name);
        const districts = regionData[value].children[0].children.map(item => item.name);
        this.multiArray[1] = cities;
        this.multiArray[2] = districts;
        newIndex[1] = 0;
        newIndex[2] = 0;
      } else if (column === 1) { // 市变化
        const provinceIndex = newIndex[0];
        const districts = regionData[provinceIndex].children[value].children.map(item => item.name);
        this.multiArray[2] = districts;
        newIndex[2] = 0;
      }

      this.multiIndex = newIndex;
    },

    // 确定选择
    onPickerChange(e) {
      const indices = e.detail.value;
      const province = this.multiArray[0][indices[0]];
      const city = this.multiArray[1][indices[1]];
      const district = this.multiArray[2][indices[2]];
      this.selectedRegion = `${province} - ${city} - ${district}`;
    }
  }
};
</script>

2. 在 regionData.js 中（示例数据结构）：

export default [
  {
    name: "北京市",
    children: [
      {
        name: "北京市",
        children: [
          { name: "东城区" },
          { name: "西城区" }
          // ... 其他区
        ]
      }
    ]
  },
  {
    name: "广东省",
    children: [
      {
        name: "广州市",
        children: [
          { name: "天河区" },
          { name: "越秀区" }
          // ... 其他区
        ]
      }
      // ... 其他市
    ]
  }
  // ... 其他省
];

注意事项：

  • 数据源：如果数据量大，建议使用第三方 API（如高德地图 API）或优化 JSON 结构。
  • 性能：在 columnchange 中避免复杂计算，以保持滑动流畅。
  • 兼容性：测试不同平台的 <picker> 组件表现（如 iOS 和 Android）。

通过以上方法，你可以快速实现省市区三级联动功能。如果需要完整数据，可以从 GitHub 搜索“ChinaRegionData”获取现成的 JSON 文件。

回到顶部