@retailwe/ui-address-list

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