在 UniApp 中使用 uni-data-picker 实现省市区地址选择

• 点击地址输入框弹出省市区三级选择器
• 选择后，将省市区名称与编码回显到输入框，并存储到表单对象
• 支持输入框清空功能

• UniApp 框架
• uni-data-picker 扩展组件（需在 HBuilderX 中导入）
• 后端提供省市区树形结构数据接口
• Redis 缓存（后端用于优化数据查询性能）

/** * 获取省市区树形列表 * @return void */ public function treeList() { $key = 'area_tree_list'; $list = redis_utils()->get($key); // 缓存不存在则从数据库查询并构建树形结构 if (!$list) { $list = \app\common\model\Area::field('id,pid,name') ->order('id asc') ->select() ->toArray(); $tree = new Tree(); $list = $tree->list_to_tree($list, 'id', 'pid', 'children'); // 缓存1小时 redis_utils()->set($key, $list, 3600); } $this->success('成功', $list); }

{ "id": 1, "pid": 0, "name": "北京", "children": [ { "id": 2, "pid": 1, "name": "北京市", "children": [ { "id": 3, "pid": 2, "name": "东城区" } // 其他区县... ] } ] }

<template> <view class="form-container"> <!-- 地址选择项 --> <view class="item flex-row" @click="selectArea"> <text class="label">地址</text> <uv-input v-model="areaText" border="none" clearable placeholder="省、市、区、街道" placeholder-class="placeholder-class" /> </view> <!-- 省市区选择器 --> <view style="position: relative"> <uni-data-picker v-if="openPicker" ref="areaPicker" v-model="formData.areas" placeholder="请选择地址" popup-title="请选择城市" :localdata="areaList" :map="{text:'name',value:'id'}" self-field="id" parent-field="pid" @change="onchange" /> <!-- 遮罩层：防止选择器未激活时被点击 --> <view style="position: absolute;background-color: #F5F5F5;width: 100%;height: 90rpx;left: 0;top: 0" /> </view> </view> </template>

<style scoped> .item { padding: 40rpx 0; border-bottom: 1rpx solid #F8F9FA; /* 占位符样式 */ .placeholder-class { color: #999999; font-size: 26rpx; } /* 标签样式 */ .label { font-size: 30rpx; width: 140rpx; font-weight: 400; } } </style>

<script> export default { data() { return { // 地址输入框显示文本 areaText: '', // 选择器显示状态 openPicker: true, // 省市区树形数据 areaList: [], // 表单数据 formData: { areas: [], province: '', city: '', area: '', province_code: '', city_code: '', area_code: '' } } }, onLoad() { // 页面加载时请求省市区数据 this.getAreaList(); }, methods: { /** * 请求省市区树形数据 */ getAreaList() { api.area.treeList().then(res => { this.areaList = res.data }) }, /** * 点击地址项打开选择器 */ selectArea() { this.$refs.areaPicker.show(); }, /** * 选择器值改变事件 * @param {Object} e - 事件对象 */ onchange(e) { const value = e.detail.value; // 存储省市区名称和编码 this.formData.province = value[0].text; this.formData.city = value[1].text; this.formData.area = value[2].text; this.formData.province_code = value[0].value; this.formData.city_code = value[1].value; this.formData.area_code = value[2].value; // 回显到输入框 this.areaText = `${value[0].text}/${value[1].text}/${value[2].text}`; } } } </script>

• localdata：绑定省市区树形数据，是实现三级联动的核心数据源
• map：映射数据字段，{text:'name',value:'id'} 表示将数据中的 name 作为显示文本，id 作为值
• self-field：当前节点 ID 字段名，对应数据中的 id
• parent-field：父节点 ID 字段名，对应数据中的 pid
• v-model：绑定选中的地址数据数组

• 点击地址输入框区域，触发 selectArea 方法，调用选择器的 show() 方法弹出选择器
• 选择完成后，触发 change 事件，解析选中的省市区数据，更新表单和输入框显示

• 后端通过 Redis 缓存省市区数据，避免频繁查询数据库
• 前端可对省市区数据做本地缓存，避免重复请求接口

• 添加加载状态，请求数据时显示加载动画
• 处理选择器数据为空的异常情况
• 支持地址输入框手动输入，结合选择器使用
• 增加省份快速定位功能，提升选择效率

• 适配不同端（微信小程序、App、H5）的样式和交互差异
• 处理部分地区只有两级数据的情况（如直辖市）

• 使用 uni-data-picker 实现地址选择的核心是正确配置树形数据和字段映射，localdata、map、self-field、parent-field 是关键属性。
• 交互逻辑上，通过控制选择器的显示隐藏，结合 change 事件处理选中数据，实现输入框回显和表单数据存储。
• 前后端配合优化（如 Redis 缓存、异常处理）能大幅提升地址选择功能的性能和用户体验。