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

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