uniapp 如何实现省市区选择功能

在uniapp中想要实现省市区三级联动选择功能，有什么推荐的方案或组件吗？目前尝试了picker组件但只能单列选择，需要手动切换省市区的数据比较麻烦。希望找一个能像原生小程序那样三级联动的解决方案，最好是开源的或者有现成的插件可以直接使用。另外数据源方面，是自己维护JSON数据还是调用第三方API更合适？求有经验的开发者分享实现方案。

2 回复

使用 uni-app 实现省市区选择，推荐以下方法：

  1. 使用 uni-data-picker 组件（官方推荐）：

    • 引入 uni-data-picker，配置数据源（本地 JSON 或云端数据）
    • 简单配置即可实现三级联动

  2. 自定义 picker 组件：

    • 通过 picker-view 实现自定义样式
    • 配合本地 JSON 数据实现联动

  3. 第三方插件：

    • 在插件市场搜索“省市区选择器”
    • 选择评分高的插件快速集成

建议优先使用官方组件，兼容性更好，开发更快捷。


在 UniApp 中实现省市区选择功能，可以通过以下方法：

1. 使用现成组件（推荐）

  • uView UI 的 u-picker 组件：

    <template>
  <view>
    <u-picker
      :show="showPicker"
      :columns="columns"
      @confirm="confirm"
      @cancel="showPicker = false"
    ></u-picker>
    <button @click="showPicker = true">选择省市区</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showPicker: false,
      columns: [
        // 省数据
        [
          { label: '北京', value: '110000' },
          { label: '上海', value: '310000' }
        ],
        // 市数据
        [],
        // 区数据
        []
      ]
    }
  },
  methods: {
    confirm(e) {
      console.log(e.value) // 获取选择结果
      this.showPicker = false
    }
  }
}
</script>

    需引入 uView UI 库，数据需自行按层级组织。

  • 第三方插件：在插件市场搜索“省市区选择”，直接集成。

2. 手动实现联动选择

使用 picker 组件和动态数据加载：

<template>
  <picker
    mode="multiSelector"
    :range="range"
    @change="onChange"
  >
    <view>选择省市区</view>
  </picker>
</template>

<script>
export default {
  data() {
    return {
      provinces: [],
      cities: [],
      areas: [],
      range: [[], [], []] // 对应省市区数据
    }
  },
  mounted() {
    this.loadProvinces()
  },
  methods: {
    loadProvinces() {
      // 加载省份数据
      this.range[0] = this.provinces.map(p => p.name)
    },
    onChange(e) {
      const index = e.detail.value
      // 根据省份索引加载城市，再根据城市加载区县
    }
  }
}
</script>

3. 数据来源

  • 使用国家标准统计局数据
  • 从 GitHub 获取开源数据（如 pcas-code）
  • 阿里云地区 API

注意事项

  • 数据需预处理为嵌套数组格式
  • 小程序端注意数据量，可考虑分步加载
  • H5 端可使用更复杂的选择方案

选择现成组件库（如 uView）可节省开发时间，数据建议使用最新行政区划数据。

回到顶部