在 UniApp 开发中地址选择是表单场景中的常见需求。借助官方扩展组件 uni-data-picker可以高效实现省市区三级联动选择无需重复造轮子大幅提升开发效率。本文结合实际代码案例详细讲解如何基于 uni-data-picker 实现地址选择功能。一、需求分析与技术准备1. 核心需求点击地址输入框弹出省市区三级选择器选择后将省市区名称与编码回显到输入框并存储到表单对象支持输入框清空功能2. 技术依赖UniApp 框架uni-data-picker 扩展组件需在 HBuilderX 中导入后端提供省市区树形结构数据接口Redis 缓存后端用于优化数据查询性能二、实现步骤1. 后端接口准备后端需提供省市区树形结构数据接口将数据库中的省市区数据组装成树形结构并通过 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: 东城区 } // 其他区县... ] } ] }2. 前端页面布局页面结构包含地址输入框区域和 uni-data-picker 选择器区域通过 v-if 控制选择器的显示与隐藏。template view classform-container !-- 地址选择项 -- view classitem flex-row clickselectArea text classlabel地址/text uv-input v-modelareaText bordernone clearable placeholder省、市、区、街道 placeholder-classplaceholder-class / /view !-- 省市区选择器 -- view styleposition: relative uni-data-picker v-ifopenPicker refareaPicker v-modelformData.areas placeholder请选择地址 popup-title请选择城市 :localdataareaList :map{text:name,value:id} self-fieldid parent-fieldpid changeonchange / !-- 遮罩层防止选择器未激活时被点击 -- view styleposition: absolute;background-color: #F5F5F5;width: 100%;height: 90rpx;left: 0;top: 0 / /view /view /template3. 样式美化为地址选择项添加基础样式保证界面美观且符合移动端交互习惯。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; } } /style4. 逻辑实现在页面脚本中完成数据请求、选择器显示隐藏、选择结果处理等核心逻辑。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三、关键配置说明1.uni-data-picker核心属性localdata绑定省市区树形数据是实现三级联动的核心数据源map映射数据字段{text:name,value:id} 表示将数据中的 name 作为显示文本id 作为值self-field当前节点 ID 字段名对应数据中的 idparent-field父节点 ID 字段名对应数据中的 pidv-model绑定选中的地址数据数组2. 交互逻辑点击地址输入框区域触发 selectArea 方法调用选择器的 show() 方法弹出选择器选择完成后触发 change 事件解析选中的省市区数据更新表单和输入框显示四、优化建议1. 性能优化后端通过 Redis 缓存省市区数据避免频繁查询数据库前端可对省市区数据做本地缓存避免重复请求接口2. 体验优化添加加载状态请求数据时显示加载动画处理选择器数据为空的异常情况支持地址输入框手动输入结合选择器使用增加省份快速定位功能提升选择效率3. 兼容性优化适配不同端微信小程序、App、H5的样式和交互差异处理部分地区只有两级数据的情况如直辖市总结使用 uni-data-picker 实现地址选择的核心是正确配置树形数据和字段映射localdata、map、self-field、parent-field 是关键属性。交互逻辑上通过控制选择器的显示隐藏结合 change 事件处理选中数据实现输入框回显和表单数据存储。前后端配合优化如 Redis 缓存、异常处理能大幅提升地址选择功能的性能和用户体验。通过以上步骤你可以快速在 UniApp 项目中实现标准化、高可用的省市区地址选择功能避免重复开发三级联动逻辑显著提升开发效率。