add-cart 添加购物车

引入

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

// app.json 或 index.json
"usingComponents": {
  "add-cart": "@retailwe/ui-add-cart/index"
}

代码演示

基础用法

<wr-add-cart wr-class="add-cart-icon" icon="add-cart" size="48" color="#FA550F" data-id="goods-0" data-index="{{0}}" bindclick="onAddCart" />

onAddCart(e: any) {
  const { callback } = e.detail;
  if (callback) {
    callback({
      startPos: { x: 10, y: 10 }, // 动画起始坐标
      endPos: {
        x: 200,
        y: 300,
      }, // 动画终止坐标
      image: {
        url: 'https://...',
        width: 50,
        height: 50,
      }, // 图片url及宽高
    });
  }
}

指定动画速度

onAddCart(e: any) {
  const { callback } = e.detail;
  if (callback) {
    callback({
      startPos: { x: 10, y: 10 }, // 动画起始坐标
      endPos: {
        x: 200,
        y: 300,
      }, // 动画终止坐标
      image: {
        url: 'https://...',
        width: 50,
        height: 50,
        duration: 500,  // 单位ms
      }, // 图片url及宽高
    });
  }
}

API

add-cart Props

| 参数 | 说明 | 类型 | 默认值 | 版本 | |-----------|-----------|-----------|-------------|-------------| | icon | 加购按钮的iconfont图标 | string | add-cart | - | | size | 图标大小 | string | number | 48 | 传入数字时，将以rpx为单位 | | color | 图标颜色 | string | #FA550F | - | | info | 角标内容 | string | - | - | | dot | 是否显示红点 | boolean | - | - | | customStyle | 自定义样式 | string | - | - |

add-cart Event

| 事件名 | 说明 | 参数 | |------|------|------| | click | 点击加购时触发 | callback: 回调函数，用于触发加购动画, |

callback参数说明

type CallbackParams = {
  startPos: Point; // 起始点坐标，单位px
  endPos: Point; // 终止点坐标，单位px
  image: {
    url: string; // 图片url
    width: number; // 图片宽度，单位px
    height: number; // 图片高度，单位px
  }; // 图片
  duration?: number; // 动画持续时间，单位ms
};