支付寶小程序營(yíng)銷組件 刮刮卡·scratch-card

在刮刮卡區(qū)域進(jìn)行刮卡抽獎(jiǎng)。

更多詳細(xì)信息請(qǐng)參見(jiàn) 代碼市場(chǎng)。

掃碼體驗(yàn)

示例代碼

安裝

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

注冊(cè)

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

調(diào)用

<!-- .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 為動(dòng)態(tài)獲取的抽獎(jiǎng)結(jié)果 -->undefined

//.js
const app = getApp();
Page({
  data: {
    result: ''
  },
  onLoad(options) {
    setTimeout(() => {
      this.setData({
        result: '很遺憾，差點(diǎn)就中獎(jiǎng)了'
      });
    }, 500);
  },
  onFinish() {
    console.log('刮獎(jiǎng)結(jié)束了');
  }
});

當(dāng)抽獎(jiǎng)結(jié)果顯示為圖片或需要自定義樣式修飾時(shí)，可以傳入 slot，并將 resultText 值設(shè)置為''。

<!-- .axml -->
<!-- 將 resultText 設(shè)置為空字符串 -->
<scratch resultText=''>
  <!-- 此處為 slot 子節(jié)點(diǎn)內(nèi)容 -->
  <view class="result">
    <text>{{result}}</text>
  </view>
</scratch>

屬性