0.0.27 • Published 4 years ago

@retailwe/ui-address-item v0.0.27

Weekly downloads
-
License
-
Repository
-
Last release
4 years ago

address-item 地址项

使用效果

正常效果

image-20200709142159110

向左扫动

image-20200709142219342

外部自定义样式

image-20200709172636234

引入方法

全局引入,在 miniprogram 根目录下的app.json中配置,局部引入,在需要引入的页面或组件的index.json中配置。

// app.json 或 index.json
"usingComponents": {
  "address-item": "@retailwe/ui-address-item/index"
}

使用方法

<!--- wxml文件 --->
<wr-address-item
	address="{{address}}"
	bind:onSelect="onSelect"
	bind:onDelete="onDelete"
	bind:onEdit="onEdit">
</wr-address-item>
/* 脚本文件 */
Page({
  data: {
    address: {
      name: '张大锤', // 收货人姓名
      phone: '13438350000', //收货人电话
      isDefault: 1, //是否是默认地址,1是,0不是
      addressTag: '公司', // 标签,“公司”、“家”等
      fullAddress: '广东省深圳市南山区腾讯滨海大厦南塔7楼', // 地址信息
      addressId: '10001', //地址编号
    },
  },
  onDelete(e) {
    console.log('点击了删除', e.detail);
  },
  onSelect(e) {
    console.log('选择了地址', e.detail);
  },
  onEdit(e) {
    console.log('点击了编辑', e.detail);
  },
});

参数说明

接收4个参数:addressonSelectonDeleteonEdit

数据参数:address

参数说明类型默认值版本
address地址信息Object{}-

对于address对象的参数要求是:

参数说明类型默认值
name收件人名称string-
phoneNumber联系电话string''
address详细地址string-
isDefault标识:是否是默认boolean''
tag类型标签string-
id地址编号number-

事件参数:onSelectonDeleteonEdit

事件名说明参数
onSelect点击卡片触发e
onDelete左拉卡片,点击删除触发e
onEdit点击修改icon触发,在该事件中编程式跳转e

外部样式类

类名说明
item-wrapper-class地址项根结点样式
title-class收货人及电话样式
default-tag-class默认标签样式
normal-tag-class普通标签样式
address-info-class地址信息样式
delete-class左扫删除按钮样式

注意⚠️ :由于小程序实现上的限制,外部样式类的优先级不能确定,建议增加!important覆盖生效。

0.0.26

4 years ago

0.0.27

4 years ago

0.0.25

4 years ago

0.0.24

4 years ago

0.0.23

4 years ago

0.0.21

4 years ago

0.0.20

4 years ago

0.0.19

4 years ago

0.0.18

4 years ago

0.0.17

4 years ago

0.0.16

4 years ago

0.0.15

4 years ago

0.0.14

4 years ago

0.0.13

4 years ago

0.0.12

4 years ago

0.0.11

4 years ago

0.0.10

4 years ago

0.0.9

4 years ago

0.0.8

4 years ago

0.0.7-beta.1

4 years ago