uni-app收货地址管理核心在于数据流向、状态判断与路由控制:onShow中加载列表防刷新失效;表单页通过URL参数区分新建/编辑;默认地址需前端强制唯一并同步更新缓存与后端;删除需二次确认、侧滑防冒泡,并通知订单页等关联页面。

uni-app制作收货地址管理页面,核心不是“堆组件”,而是理清**数据流向、状态判断和路由控制**。直接上手就能跑通,但容易在几个关键点卡住:默认地址冲突、列表刷新不及时、表单复用逻辑错乱。
怎么用 onShow 正确加载地址列表
地址列表页不能只靠 onLoad 初始化——用户从新增/编辑页返回时,onLoad 不触发,列表就还是旧的。
- 必须把获取地址逻辑放在
onShow中,每次切回页面都重新拉取(或读缓存) - 如果用了 vuex 或 pinia,记得在
onShow里 dispatch 对应 action;如果本地缓存,用uni.getStorageSync('addressList')后再赋值给 data - 避免重复请求:加个 loading 状态或节流标记,防止快速切页多次触发
如何复用同一个表单页区分新建和修改
地址表单页(如 /pagesMember/address-form/address-form)必须靠 URL 参数判断行为,而不是靠页面状态变量。
- 跳转时带上
?id=123:新建地址不带 id,修改地址必须带有效 id - 在表单页
onLoad中解析options.id,存在则调用getAddressDetail(id)接口并回显数据;不存在则初始化空对象 - 提交时统一判断:
if (this.form.id) { api.updateAddress(...) } else { api.addAddress(...) } - 注意:表单数据要深拷贝,否则修改时会污染原始缓存或 vuex state
为什么默认地址只能有一个,且切换时要同步更新 UI
后端通常不限制默认地址数量,但业务规则要求「有且仅有一个」,前端必须主动约束,否则会出现两个「默认」标签同时高亮。
- 点击设为默认时,先遍历当前地址列表,把所有
isDefault: true的项设为false,再把当前项设为true - 提交前,把修改后的整个列表(或仅当前项 + 默认标记变更)发给后端;不要只传
{ isDefault: true }这种局部字段,避免后端漏处理 - 本地缓存中也要同步更新整个数组,否则下次
onShow读出来还是旧状态
删除地址前二次确认和侧滑删除怎么写才稳
微信小程序原生不支持 swipe-action,uView 的 u-swipe-action 或 uni-ui 的 uni-swipe-action 是常用解法,但容易忽略事件冒泡问题。
- 侧滑按钮的
@click必须加.stop修饰符,否则会同时触发外层navigator跳转 - 删除前弹窗用
uni.showModal,不要用alert(不兼容 iOS) - 删除成功后,立刻从 data 中
splice对应项,并调用uni.setStorageSync更新缓存;别等下一次onShow再刷 - 如果删的是默认地址,要自动把列表里第一个地址设为默认(或提示用户手动选),否则地址列表可能全无默认项
真实项目里最常被忽略的,是「地址变更后,订单页没响应」——比如用户在地址管理页删了默认地址,但订单页还在渲染已失效的地址 ID。这需要全局状态(如 pinia store)或事件总线通知,不能只靠页面级 data。











