uniapp 省市区选择器

### 关于 UniApp 实现省市区三级联动选择器 在 UniApp 开发环境中，实现省市区三级联动选择器是一个常见的需求。以下是基于所提供的参考资料以及专业知识整理的内容。 #### 使用 Picker 组件实现省市区三级联动 可以通过 `picker` 的 `mode="region"` 属性快速实现省市区三级联动功能[^1]： ```html <template> <view> <picker mode="region" @change="bindRegionChange"> <view class="picker">当前选择：{{ region }}</view> </picker> </view> </template> <script> export default { data() { return { region: ['广东省', '广州市', '海珠区'] }; }, methods: { bindRegionChange(e) { this.region = e.detail.value; } } }; </script> ``` 上述代码通过内置的 `mode="region"` 提供了默认的省市区数据集，适合简单的场景使用。 --- #### 自定义实现省市区三级联动 如果需要更灵活的功能（如动态加载、自定义样式等），可以手动构建三级联动逻辑。以下是一个完整的示例代码[^3]: ```html <template> <view> <!-- 打开选择器按钮 --> <button @click="openPicker">打开选择器</button> <!-- 地址选择器 --> <view v-if="showPicker" class="address-picker"> <picker-view indicator-style="height: 50px;" :value="pickerValue" @change="onChange"> <picker-view-column> <view v-for="(province, index) in provinces" :key="index" class="item">{{ province.label }}</view> </picker-view-column> <picker-view-column> <view v-for="(city, index) in cities" :key="index" class="item">{{ city.label }}</view> </picker-view-column> <picker-view-column> <view v-for="(area, index) in areas" :key="index" class="item">{{ area.label }}</view> </picker-view-column> </picker-view> <button @click="confirmSelection">确认</button> </view> </view> </template> <script> export default { data() { return { showPicker: false, pickerValue: [0, 0, 0], provinces: [], // 省份数据 cities: [], // 城市数据 areas: [], // 区域数据 selectedProvince: null, selectedCity: null, selectedArea: null }; }, onLoad() { // 初始化省份数据 (假设从 JSON 文件或其他接口获取) this.provinces = [ { label: "北京市", value: "bj", children: [{ label: "朝阳区", value: "cyq" }] }, { label: "上海市", value: "sh", children: [{ label: "黄浦区", value: "hpq" }] } ]; this.cities = this.provinces[0].children || []; this.areas = this.cities[0]?.children || []; }, methods: { openPicker() { this.showPicker = true; }, onChange(event) { const val = event.detail.value; // 更新省份 if (val[0] !== this.pickerValue[0]) { this.selectedProvince = this.provinces[val[0]]; this.cities = this.selectedProvince.children || []; this.areas = this.cities[0]?.children || []; this.pickerValue = [val[0], 0, 0]; } // 更新城市 if (val[1] !== this.pickerValue[1]) { this.selectedCity = this.cities[val[1]]; this.areas = this.selectedCity?.children || []; this.pickerValue = [this.pickerValue[0], val[1], 0]; } // 更新区域 if (val[2] !== this.pickerValue[2]) { this.selectedArea = this.areas[val[2]]; this.pickerValue = [this.pickerValue[0], this.pickerValue[1], val[2]]; } }, confirmSelection() { console.log("最终选择:", this.selectedProvince, this.selectedCity, this.selectedArea); this.showPicker = false; } } }; </script> <style> .item { height: 50px; line-height: 50px; text-align: center; } .address-picker { position: fixed; bottom: 0; width: 100%; background-color: white; } </style> ``` 此方法允许开发者完全控制数据流和界面交互行为，适配更多复杂业务场景。 --- #### 插件推荐 对于希望减少开发工作量的情况，可以直接引入成熟的第三方插件或组件库来完成省市区三级联动的选择器功能。例如： - **UView UI**: UView 是一款专门为 UniApp 设计的 UI 库，其中包含了省市区三级联动组件。其特点是支持向上唤起式设计，并附带标准地址文件。 官方文档链接: [https://www.uviewui.com/components/popup.html](https://www.uviewui.com/components/popup.html) - **GitCode 资源集合**: 可以下载已封装好的省市区三级联动组件及其配套的 JSON 数据文件: 下载地址: [https://gitcode.com/Resource-Bundle-Collection/715f6](https://gitcode.com/Resource-Bundle-Collection/715f6) --- #### 动态加载与四级联动扩展 当项目需要更高灵活性时，比如支持到乡镇甚至村庄级别的选择，则需采用动态加载的方式。此时可参考如下方案[^4]： 1. 将各级数据存储为树形结构； 2. 用户每选定上一级后，异步请求下一级数据并更新视图； 3. 配合 JSON 数据文件或者后端 API 接口完成动态加载。 具体实现方式详见参考资料中的详细教程。 --- ###