Tini Dice Roller

Tini Dice Roller hỗ trợ bạn chơi game đổ xúc xắc

Install

yarn add @tiki.vn/tini-mini-dice-roller

Usage

json

{
  "usingComponents": {
    "diceroller": "@tiki.vn/tini-mini-dice-roller/es/component/index"
  }
}

js

Page({
  data: {
    awardImg: '',
    awardName: '',
    tipText: '',
  },
  onStart() {
    this.setData({
      tipText: 'Lottery draw...',
    });
    setTimeout(() => {
      this.setData({
        awardImg:
          'https://salt.tikicdn.com/ts/miniapp/46/b3/08/1d7f60744f1de44a6d027a8503c9020c.png',
        awardName: '1st Price',
      });
    }, 2000);
  },
  onFinish() {
    this.setData({
      tipText: `Lottery result：${this.data.awardName}`,
    });
  },
});

txml

<view class="container">
  <diceroller
    clickMode="true"
    awardImg="{{awardImg}}"
    onStart="onStart"
    onFinish="onFinish"
  >
    <view slot="button">Shake</view>
  </diceroller>
  <view class="tip-text">{{tipText}}</view>
</view>

API

| Tên thuộc tính | Kiểu dữ liệu | Giá trị mặc định | Mô tả | | -------------- | ------------ | -------------------------------------------------------------------------------------------- | ---------------------------------- | | width | Number | 300 | Chiểu rộng của component (px) | | height | Number | 300 | Chiều cao của component (px) | | background | String | #FFF | Hình nền của component | | rollTime | Number | 3000 | Thời gian quay xúc xắc | | rollImg | String | Xem thử | Hình kết quả quay trúng | | initImg | String | Xem thử | Hình của xúc xắc | | onStart | Func | - | Sự kiện được gọi khi bắt đầu quay | | onFinish | Func | - | Sự kiện được gọi khi kết thúc quay |