WeChatミニプログラム抽選コンポーネントの使い方

npm i 宝くじターンテーブル wx ミニプログラム用

{
 "コンポーネントの使用": {
  "lottery-turntable":"lottery-turntable-for-wx-miniprogram/lottery_turntable/index"
 }
}

定数データ = [{
 "id": "792085712309854208",
 "imgUrl": "../../images/icon.png",
 "title": "サンダー プラチナ メンバー マンスリー カード - 1"
}, {
 "id": "766410261029724160",
 "imgUrl": "../../images/icon.png",
 "title": "サンダー プラチナ メンバー マンスリー カード - 2"
}, {
 "id": "770719340921364480",
 "imgUrl": "../../images/icon.png",
 "title": "サンダー プラチナ メンバー マンスリー カード - 3"
}, {
 "id": "770946438416048128",
 "imgUrl": "../../images/icon.png",
 "title": "サンダー プラチナ メンバー マンスリー カード - 4"
}, {
 "id": "781950121802735616",
 "imgUrl": "../../images/icon.png",
 "title": "サンダー プラチナ メンバー マンスリー カード - 5"
}, {
 "id": "766411654436233216",
 "imgUrl": "../../images/icon.png",
 "title": "サンダー プラチナ メンバー マンスリー カード - 6"
}, {
 "id": "770716883860332544",
 "imgUrl": "../../images/icon.png",
 "title": "サンダー プラチナ メンバー マンスリー カード - 7"
}, {
 "id": "796879308510732288",
 "imgUrl": "../../images/icon.png",
 "title": "サンダー プラチナ メンバー マンスリー カード - 8"
}];
 
ページ（{
 データ： {
  datas: datas, // データ PrizeId: '', // 優勝結果 ID は属性を通じてコン​​ポーネントに渡されます config: { // ターンテーブル構成は属性を通じてコン​​ポーネントに渡されます titleLength: 7
  }
 },
 /**
  * 回数不足のコールバック* @param e
  */
 onNotEnoughHandle(e) {
  wx.showToast({
   アイコン: 'なし'、
   タイトル: e.detail
  })
 },
 
 /**
  *抽選コールバック*/
 onLuckDrawHandle() {
  this.setData({
   賞品ID: this.data.datas[Math.floor(Math.random() * 10 % this.data.datas.length)].id
  });
 },
 
 /**
  * アニメーション回転完了コールバック */
 onLuckDrawFinishHandle() {
  定数データ = this.data.datas;
  constデータ = datas.find((item) => {
   item.id === this.data.prizeId を返します。
  });
  wx.showToast({
   アイコン: 'なし'、
   title: `${data.title} 優勝おめでとうございます`
  })
  this.setData({
   賞品ID: ''
  });
 }
})
 

<宝くじターンテーブル
   データ="{{データ}}"
   賞品ID="{{prizeId}}"
   カウント="{{5}}"
   config="{{config}}"
   bindLuckDraw="onLuckDrawHandle"
   bindNotEnough="onNotEnoughHandle"
   bindLuckDrawFinish="onLuckDrawFinishHandle"
  </宝くじターンテーブル>

/**
 * イーズ: 値は以下の通りです* 'linear' アニメーションの速度は最初から最後まで同じです* 'ease' アニメーションは低速で始まり、その後加速し、終了前に低速になります* 'ease-in' アニメーションは低速で始まります* 'ease-in-out' アニメーションは低速で始まり、終了します* 'ease-out' アニメーションは低速で終了します* 'step-start' アニメーションは最初のフレームで終了状態にジャンプし、終了まで続きます* 'step-end' アニメーションは開始状態のままで、最後のフレームで終了状態にジャンプします*/
// 以下はデフォルトの設定です let config = {
 サイズ： {
  幅: '572rpx',
  高さ: '572rpx'
 }, // ターンテーブルの幅と高さbgColors: ['#FFC53F', '#FFED97'], // ターンテーブル間隔の背景色は、複数の色の交互表示をサポートしますfontSize: 10, // テキスト サイズfontColor: '#C31A34', // テキストの色titleMarginTop: 12, // 最も外側のテキストの余白titleLength: 6 // 最も外側のテキストの番号iconWidth: 29.5, // アイコンの幅iconHeight: 29.5, // アイコンの高さiconAndTextPadding: 4, // 最も内側のテキストとアイコンの間の余白duration: 8000, // ターンテーブルの回転アニメーションdurationrate: 1.5, // 継続時間 s / 円の数で取得border: 'border: 10rpx solid #FEFAE4;', // ターンテーブルの境界ease: 'ease-out' // ターンテーブル アニメーション};