支付宝小程序营销组件 刮刮卡·scratch-card

2020-09-18 11:25 更新

在刮刮卡区域进行刮卡抽奖。

更多详细信息请参见 代码市场

扫码体验

示例代码

安装

npm i ant-mini-scratch-card --save

注册

// .json
{
  "usingComponents": {
    "scratch": "ant-mini-scratch-card/es/scratch/index"
  }
}

调用

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

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

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

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

属性

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

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号