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覆盖生效。