支付宝小程序营销组件 摇骰子·dice-roller

用户点击按钮或者摇动手机进行摇骰子，根据出现的点数进行相应抽奖，可以摇动多次。

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

扫码体验

示例代码

安装

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

注册

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

调用

<!-- .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: `抽奖结果：${this.data.awardName}`
    });
  }
});undefined

属性