uniapp h5 省市区选择器如何实现

在uniapp开发的H5页面中，如何实现一个省市区三级联动选择器？需要支持数据动态加载和回显功能，有没有现成的组件或插件推荐？最好能提供具体的代码示例和实现思路。

2 回复

使用uni-app的picker组件，结合省市区数据实现。步骤如下：

  1. 准备省市区JSON数据
  2. 使用picker的mode=“multiSelector”
  3. 监听picker变化，动态更新数据
  4. 获取选中结果

示例代码：

data() {
  return {
    region: [],
    provinces: [],
    cities: [],
    areas: []
  }
}

可通过uni-ui的region-picker组件更便捷实现。


在 UniApp 中实现 H5 省市区选择器，可以使用 picker 组件结合省市区数据实现。以下是具体步骤和代码示例：

1. 数据准备

准备省市区 JSON 数据，可从 GitHub 等平台获取（如 china-area-data），或使用在线数据源。

2. 实现代码

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

<script>
import provinceData from '@/common/province-data.js'; // 导入省市区数据

export default {
  data() {
    return {
      multiArray: [[], [], []], // 三级数据
      multiIndex: [0, 0, 0], // 当前选中索引
      selectedText: '请选择省市区'
    };
  },
  mounted() {
    this.initPicker();
  },
  methods: {
    // 初始化选择器数据
    initPicker() {
      // 填充省份
      this.multiArray[0] = provinceData.map(item => item.name);
      
      // 根据第一个省份填充城市
      const cities = provinceData[0].children || [];
      this.multiArray[1] = cities.map(item => item.name);
      
      // 根据第一个城市填充区县
      const districts = cities[0]?.children || [];
      this.multiArray[2] = districts.map(item => item.name);
      
      this.$forceUpdate();
    },

    // 列数据变化时触发
    onColumnChange(e) {
      const { column, value } = e.detail;
      const newIndex = [...this.multiIndex];
      newIndex[column] = value;

      // 根据列变化更新数据
      if (column === 0) {
        // 省份变化，更新城市和区县
        const cities = provinceData[value].children || [];
        this.multiArray[1] = cities.map(item => item.name);
        this.multiArray[2] = (cities[0]?.children || []).map(item => item.name);
        newIndex[1] = 0;
        newIndex[2] = 0;
      } else if (column === 1) {
        // 城市变化，更新区县
        const cities = provinceData[newIndex[0]].children || [];
        const districts = cities[value]?.children || [];
        this.multiArray[2] = districts.map(item => item.name);
        newIndex[2] = 0;
      }

      this.multiIndex = newIndex;
      this.$forceUpdate();
    },

    // 选择确认
    onPickerChange(e) {
      const values = e.detail.value;
      const province = provinceData[values[0]];
      const city = province.children[values[1]];
      const district = city.children[values[2]];
      
      this.selectedText = `${province.name} ${city.name} ${district.name}`;
    }
  }
};
</script>

<style>
.picker {
  padding: 20rpx;
  border: 1px solid #eee;
}
</style>

3. 数据示例（province-data.js）

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

4. 注意事项

  • 数据源需包含完整的省市区三级嵌套结构
  • 使用 $forceUpdate() 确保视图更新
  • 可添加加载动画改善用户体验

此实现适用于 H5 平台，在微信小程序等平台也兼容。如需更复杂功能（如搜索），可结合第三方组件库（如 uView）实现。

回到顶部