ant-mini-scratch-card

支付宝小程序刮刮卡组件

Usage no npm install needed!

<script type="module">
  import antMiniScratchCard from 'https://cdn.skypack.dev/ant-mini-scratch-card';
</script>

README

小程序刮刮卡组件

使用说明

安装组件

yarn add @alipay/ant-mini-scratchCard

使用示例

json

{
  "defaultTitle": "刮刮卡小程序组件",
  "allowsBounceVertical": "NO",
  "usingComponents": {
    "scratch": "@alipay/ant-mini-scratchCard/es/scratch/index"
  }
}

xaml

<view>
  <scratch
    tipText="刮刮我，有惊喜~"
    tipColor="#902d02"
    coverColor="#ffae8a"
    ctxLogoUrl="https://gw.alipayobjects.com/zos/rmsportal/iGLmHkSxYfXveGhuzzFf.png"
    resultText=''
    autoFadeOut=true
    resultText="{{result}}"
    onFinish="onFinish"
  />
</view>
<!-- 其中，result 为动态获取的抽奖结果 -->

js

const app = getApp();
Page({
  data: {
    content: 'demo',
    result: ''
  },
  onLoad(options) {
    setTimeout(() => {
      this.setData({
        result: '很遗憾，差点就中奖了'
      });
    }, 1000);
  },
  onFinish() {
    console.log('刮奖结束了');
  }
});

效果图

高级用法

当抽奖结果显示为图片或需要自定义样式修饰时，可以传入slot,并将resultText值设置为''

<!-- 将 resultText 设置为空字符串 -->
<scratch resultText=''>
  <!-- 此处为 slot 子节点内容 -->
  <view class="result">
    <text>{{result}}</text>
  </view>
</scratch>

参数说明

属性 类型 默认值 含义
id String scratch-canvas 组件标识，页面唯一
width Number 300 刮刮卡宽度，单位px
height Number 150 刮刮卡高度，单位px
tipText String 刮刮我，有惊喜 刮奖区域提示文字
tipColor String #aaa 提示文字的颜色
tipSize Number 20 提示文字的字号，单位px
lineWidth Number 25 擦除线宽度，单位px
activePercent Number 0.4 当被擦除比例达到该值时刮奖结束，取值范围0-1
autoFadeOut Boolean true 当值为true且被擦除比例达到activePercent选项值时刮奖图层自动消失
ctxLogoUrl String 刮奖区图片背景，小程序接口限制目前只支持线上cdn地址或离线包地址，cdn需返回头 Access-Control-Allow-Origin: *
coverColor String #dbdbdb 刮奖区背景色，当背景图片透明度为0时无效
resultText String 谢谢参与 刮奖结果
onFinish Function ()=>{} 刮奖结束回调，当被擦除比例达到activePercent选项值时触发

由于小程序当前接口限制，暂不支持 rpx、rem等像素单位，目前仅支持 px

开发