摇骰子 小程序组件

Install

tnpm

yarn add ant-mini-dice-roller

Usage

json

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

js

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}`
    });
  }
});

xaml

<view class="container">
  <diceroller
    clickMode="true"
    awardImg="{{awardImg}}"
    onStart="onStart"
    onFinish="onFinish"
  >
    <view slot="button">外部组件摇一摇按钮</view>
  </diceroller>
  <view class='tip-text'>{{tipText}}</view>
</view>

API

属性 | 类型 | 默认值 | 含义 | --- | --- | --- | --- width | Number | 318 | 组件宽度(rpx) height | Number | 300 | 组件高度(rpx) background | String | #FFF | 背景色 rollTime | Number | 3000 | 摇骰子时间（毫秒） rollImg | String | 查看 | 摇奖时逐帧图片 initImg | String | 查看 | 初始化骰子图片 onStart | Func | - | 开始回调 onFinish | Func | - | 结束回调