@retailwe/ui-add-cart v0.0.22

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

add-cart Event

callback参数说明

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