饿了么式地址管理需用uni-list+uni-icons自建,禁用element-ui;须处理微信地址字段映射、默认状态同步缓存及scroll-view吸顶兼容问题。

element-ui)在微信小程序端会失效,必须用原生小程序语义或 uni-app 兼容方案。
address-list 组件不能直接用 element-ui 的 el-address-list
uni-app 编译到微信小程序时,不支持 Vue 2 的 element-ui(含 el-address-list),组件内部大量依赖 DOM 操作、slot-scope 和非小程序生命周期,运行时直接报错 Cannot read property 'xxx' of undefined 或白屏。即使强行引入,样式也会错乱,点击无响应。
正确做法是:用 uni-list + uni-list-item 自建地址项,配合 uni-icons 和条件渲染控制「默认」「编辑」「删除」状态。
- 不要 npm install
element-ui后在小程序平台 import 使用 - 可用的替代组合:
uni-list(官方基础组件)、uni-icons(图标)、uni-popup(地址编辑弹窗) - 地址项右侧操作区统一用
slot="right"插入按钮或 icon,避免用绝对定位覆盖
地址项默认态、选中态、编辑态要分离渲染
饿了么地址列表的关键交互是:点击切换默认地址、长按/右滑呼出编辑、底部固定「新增地址」按钮。这些在 uni-app 中必须手动绑定状态,不能靠 CSS 类自动切换。
示例关键逻辑:
<uni-list><uni-list-item v-for="(item, index) in addressList" :key="item.id" :title="item.name + ' ' + item.tel" :note="item.province + item.city + item.district + item.address" :show-extra-icon="true" extra-icon="compose-filled"><view slot="right"><uni-icons type="edit" size="18"></uni-icons><uni-icons type="trash" size="18"></uni-icons></view></uni-list-item></uni-list>
-
@click.stop防止点击图标触发父级@click(如设为默认) - 「默认」标识建议用独立 icon(如
radio-checked)放在slot="left",而非改 title 文字加粗 - 地址为空时,
note字段要兜底显示"暂无详细地址",避免空白行塌陷
微信小程序真机上 position: sticky 不生效怎么办
饿了么首页搜索框用了 position: sticky 实现吸顶,但微信小程序 scroll-view 内部不支持该 CSS 属性,uni-app 编译后等效于 static。强行写 position: sticky 在 iOS 微信和部分安卓机型上完全无效。
解决方案只有两个:
- 用
uni-sticky(uni-app 官方兼容组件),需在pages.json中配置"usingComponents"并引入 - 更轻量做法:监听
scroll-view的scrolltoupper和scrollTop,动态控制地址列表顶部「新增地址」按钮的fixed样式和top值 - 注意:不要在
scroll-view外层再套一层view并设position: fixed,会导致 iOS 下滚动卡顿
地址数据格式必须适配微信小程序的 chooseAddress 返回结构
用户从微信原生选择地址(uni.chooseAddress())后,返回字段名与饿了么后台或通用地址模型不一致,直接赋值给列表会丢字段或报错。
微信返回结构关键字段:
-
userName(不是name) -
postalCode(不是zipCode) -
provinceName、cityName、countyName(不是province/city) -
telNumber(不是tel)
入库前必须做一次映射转换,否则列表渲染时 {{ item.tel }} 会是 undefined:
const formatWechatAddress = (raw) => ({
id: Date.now().toString(),
name: raw.userName,
tel: raw.telNumber,
province: raw.provinceName,
city: raw.cityName,
district: raw.countyName,
address: raw.detailInfo,
isDefault: false
})
最易被忽略的是:地址列表页的「设为默认」操作,必须同步更新本地缓存(uni.setStorageSync)并触发页面重绘;而微信原生 chooseAddress 返回的地址,无法直接设为默认——它没带 isDefault 字段,也不在你的列表数组里,得先 push 再 setDefault,顺序错了就会出现「点了设为默认,但列表没变化」。










