更新记录

1.0.0（2026-10-14） 下载此版本

1.0.0 首发版：内置最新行政区划数据，支持省市区三级/二级自由切换、拼音及汉字智能检索、热门城市快捷标签与GPS定位回显。

平台兼容性

uni-app(3.8.5)

高性能省市区城市级联选择器 (fant-city-picker)

全网最丝滑、功能最完善的 uni-app 跨端省市区 / 城市选择组件。支持省市区三级联动、省市二级联动、热门城市、拼音模糊搜索与 GPS 一键定位。

🌟 核心特色与优势

1. 全端 100% 深度兼容：微信小程序、支付宝小程序、抖音小程序、App (Android / iOS)、H5 全端完美适配，零依赖第三方原生 SDK。
2. 多模式合一：
   • 省市区三级 / 二级自由切换；
   • 拼音与汉字模糊搜索（如输入 hangzhou 或 杭州 自动智能检索定位）；
   • 热门城市快捷标签（北上广深杭等一键直达）；
   • GPS 定位快速回显；
3. 性能极致流畅：基于 picker-view 原生级联优化，数据轻量经过压缩字典处理，杜绝几千条数据造成的卡顿白屏。
4. 符合 uni_modules 规范：开箱即用，无需配置复杂的插件安装流程。

🚀 快速上手

1. 导入插件

在 HBuilderX 插件市场点击导入，或者将 fant-city-picker 放置在项目根目录的 uni_modules/fant-city-picker。

2. 在页面中使用

<template>
  <view class="container">
    <button type="primary" @click="openPicker">点击选择省市区</button>

    <view v-if="selectedAddress" class="result-box">
      <text>当前选中：{{ selectedAddress.fullAddress }}</text>
      <text>行政代码：{{ selectedAddress.areaCode }}</text>
    </view>

    <!-- 城市选择器组件 -->
    <fant-city-picker
      ref="cityPicker"
      title="请选择收货地址"
      :column-count="3"
      :show-search="true"
      :show-hot="true"
      :show-location="true"
      @confirm="onCityConfirm"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedAddress: null
    };
  },
  methods: {
    openPicker() {
      this.$refs.cityPicker.open();
    },
    onCityConfirm(e) {
      console.log('用户选择的城市数据:', e);
      this.selectedAddress = e;
      uni.showToast({
        title: `已选择: ${e.city}`,
        icon: 'success'
      });
    }
  }
};
</script>

📖 API 属性与配置

Props 参数说明

Events 事件说明

Confirm 返回数据格式 (CityResult)

{
  "province": "浙江省",
  "provinceCode": "330000",
  "city": "杭州市",
  "cityCode": "330100",
  "area": "西湖区",
  "areaCode": "330106",
  "fullAddress": "浙江省 杭州市 西湖区"
}

兼容性测试

• ✅ 微信小程序 / 支付宝小程序 / 抖音小程序
• ✅ App (Android / iOS)
• ✅ Web / H5 / 移动端浏览器