address-list 地址列表
使用效果
正常效果
向左扫动
外部自定义样式
引入方法
全局引入,在 miniprogram 根目录下的app.json
中配置,局部引入,在需要引入的页面或组件的index.json
中配置。
// app.json 或 index.json
"usingComponents": {
"address-list": "@retailwe/ui-address-list/index"
}
使用方法
<!--- wxml文件 --->
<wr-address-list
addresses="{{addresses}}"
bind:onDelete="onDelete"
bind:onSelect="onSelect"
bind:onEdit="onEdit"
></wr-address-list>
/* 脚本文件 */
Page({
data: {
addresses: [
{
name: '张大锤',
phone: '13438350000',
isDefault: 1, //默认
addressTag: '公司',
fullAddress:
'深圳市 南山区 南山南深圳市 南山区 南山南深圳市 南山区 南山南',
addressId: '10001',
},
{
name: '李XX',
phone: '18942358108',
isDefault: 0, //默认
addressTag: '家',
fullAddress: '深圳市 南山区 南山南深圳市 南山区 南山南',
addressId: '10002',
},
{
name: '陈XX',
phone: '18942358108',
isDefault: 0, //默认
addressTag: '公司',
fullAddress: '深圳市 南山区 南山南',
addressId: '10003',
},
],
},
onDelete(e) {
console.log('点击了删除', e.detail);
},
onSelect(e) {
console.log('选择了地址', e.detail);
},
onEdit(e) {
console.log('点击了编辑', e.detail);
},
});
参数说明
接收4个参数:addresses
、onSelect
、onDelete
、onEdit
。
addresses
数据参数:参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
addresses | 地址信息 | Array<address> |
[{}] |
addresses
参数是 AddressItem 组件的接收参数address
的数组形式,address
的数据要求如下:
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
name | 收件人名称 | string | - |
phoneNumber | 联系电话 | string | '' |
address | 详细地址 | string | - |
isDefault | 标识:是否是默认 | boolean | '' |
tag | 类型标签 | string | - |
id | 地址编号 | number | - |
onSelect
、onDelete
、onEdit
事件参数:事件会透传给AddressItem
组件
事件名 | 说明 | 参数 |
---|---|---|
onSelect | 点击卡片触发 | e |
onDelete | 左拉卡片点击删除触发 | e |
onEdit | 点击修改icon触发,在该事件中编程式跳转 | e |
外部样式类
类名 | 说明 |
---|---|
list-class | 列表根节点样式 |
item-wrapper-class | 地址项-根结点样式 |
title-class | 地址项-收货人及电话样式 |
default-tag-class | 地址项-默认标签样式 |
normal-tag-class | 地址项-普通标签样式 |
address-info-class | 地址项-地址信息样式 |
delete-class | 地址项-左扫删除按钮样式 |
注意!important
覆盖生效。