@retailwe/ui-add-cart

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
};