支付寶小程序營銷組件 搖骰子·dice-roller

用戶點擊按鈕或者搖動手機進行搖骰子，根據(jù)出現(xiàn)的點數(shù)進行相應(yīng)抽獎，可以搖動多次。

更多詳細(xì)信息請參見 代碼市場。

掃碼體驗

示例代碼

安裝

npm i ant-mini-dice-roller --save

注冊

//.json
{
  "usingComponents": {
    "diceroller": "ant-mini-dice-roller/es/component/index"
  }
}

調(diào)用

<!-- .axml -->
<view class="container">
  <diceroller
    clickMode="true"
    awardImg="{{awardImg}}"
    onStart="onStart"
    onFinish="onFinish"
  >
    <view slot="button">外部組件搖一搖按鈕</view>
  </diceroller>
  <view class='tip-text'>{{tipText}}</view>
</view>

//.js
var toast = function(title) {
  my.showToast({
  type: 'success',
  content: title,
  duration: 1000,
});
}


Page({
  data: {
    awardImg: '',
    awardName: '',
    tipText: '',
  },
  onStart() {
    toast('開始搖')
    this.setData({
      tipText: '正在抽獎...'
    });
    setTimeout(() => {
      this.setData({
        awardImg: 'https://gw.alicdn.com/tfs/TB1JsqGbHPpK1RjSZFFXXa5PpXa-289-298.png',
        awardName: '1等獎'
      })
    }, 2000);
  },
  onFinish() {
    toast('搖完啦')
    this.setData({
      tipText: `抽獎結(jié)果：${this.data.awardName}`
    });
  }
});undefined

屬性