ant-mini-dice-roller

支付宝小程序摇骰子

Usage no npm install needed!

<script type="module">
  import antMiniDiceRoller from 'https://cdn.skypack.dev/ant-mini-dice-roller';
</script>

README

摇骰子 小程序组件

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 - 结束回调