So verwenden Sie die Lotteriekomponente des WeChat Mini-Programms

npm i Lotterie-Drehscheibe für WX-Miniprogramm

{
 "Komponenten verwenden": {
  "Lotterie-Drehscheibe": "Lotterie-Drehscheibe für WX-Miniprogramm/Lotterie_Drehscheibe/Index"
 }
}

const Daten = [{
 "id": "792085712309854208",
 "imgUrl": "../../images/icon.png",
 "Titel": "Monatskarte für Thunder Platinum-Mitglieder - 1"
}, {
 "id": "766410261029724160",
 "imgUrl": "../../images/icon.png",
 "Titel": "Monatskarte für Thunder Platinum-Mitglieder - 2"
}, {
 "id": "770719340921364480",
 "imgUrl": "../../images/icon.png",
 "Titel": "Monatskarte für Thunder Platinum-Mitglieder - 3"
}, {
 "id": "770946438416048128",
 "imgUrl": "../../images/icon.png",
 "Titel": "Monatskarte für Thunder Platinum-Mitglieder - 4"
}, {
 "id": "781950121802735616",
 "imgUrl": "../../images/icon.png",
 "Titel": "Monatskarte für Thunder Platinum-Mitglieder - 5"
}, {
 "id": "766411654436233216",
 "imgUrl": "../../images/icon.png",
 "Titel": "Monatskarte für Thunder Platinum-Mitglieder - 6"
}, {
 "id": "770716883860332544",
 "imgUrl": "../../images/icon.png",
 "Titel": "Monatskarte für Thunder Platinum-Mitglieder - 7"
}, {
 "id": "796879308510732288",
 "imgUrl": "../../images/icon.png",
 "Titel": "Monatskarte für Thunder Platinum-Mitglieder - 8"
}];
 
Seite({
 Daten: {
  datas: datas, // data prizeId: '', // Die Gewinnergebnis-ID wird über die Attribute config an die Komponente übergeben: { // Die Plattenspieler-Konfiguration wird über die Attribute titleLength an die Komponente übergeben: 7
  }
 },
 /**
  * Unzureichende Rückrufzeiten* @param e
  */
 beiNichtGenugHandle(e) {
  wx.showToast({
   Symbol: „keine“,
   Titel: e.detail
  })
 },
 
 /**
  *Lotterie-Rückruf*/
 beiLuckDrawHandle() {
  dies.setData({
   Preis-ID: this.data.datas[Math.floor(Math.random() * 10 % this.data.datas.length)].id
  });
 },
 
 /**
  * Rückruf zur Beendigung der Animationsrotation */
 beiLuckDrawFinishHandle() {
  const datas = diese.daten.datas;
  const data = datas.find((item) => {
   Rückgabewert für item.id === this.data.prizeId;
  });
  wx.showToast({
   Symbol: „keine“,
   Titel: `Herzlichen Glückwunsch zum Gewinn von ${data.title}`
  })
  dies.setData({
   Preis-ID: ''
  });
 }
})
 

<Lotterie-Drehscheibe
   Daten="{{Daten}}"
   Preis-ID = "{{Preis-ID}}"
   Anzahl="{{5}}"
   config="{{config}}"
   bindLuckDraw="onLuckDrawHandle"
   bindNotEnough="beiNichtGenugHandle"
   bindLuckDrawFinish="onLuckDrawFinishHandle"
  ></Lotterie-Drehtisch>

/**
 * ease: Die Werte sind wie folgt* 'linear' Die Geschwindigkeit der Animation ist von Anfang bis Ende gleich* 'ease' Die Animation startet mit langsamer Geschwindigkeit, wird dann schneller und verlangsamt sich vor dem Ende* 'ease-in' Die Animation startet mit langsamer Geschwindigkeit* 'ease-in-out' Die Animation startet und endet mit langsamer Geschwindigkeit* 'ease-out' Die Animation endet mit langsamer Geschwindigkeit* 'step-start' Die Animation springt zum Endzustand im ersten Frame und wird bis zum Ende fortgesetzt* 'step-end' Die Animation bleibt im Startzustand und springt zum Endzustand im letzten Frame*/
// Das Folgende ist die Standardkonfiguration let config = {
 Größe: {
  Breite: '572rpx',
  Höhe: '572rpx'
 }, // Breite und Höhe des DrehtischsbgColors: ['#FFC53F', '#FFED97'], // Die Hintergrundfarbe des Drehtischintervalls unterstützt mehrere FarbwechselfontSize: 10, // TextgrößefontColor: '#C31A34', // TextfarbetitleMarginTop: 12, // Äußerster TextrandtitleLength: 6 // Äußerste TextnummericonWidth: 29.5, // SymbolbreiteiconHeight: 29.5, // SymbolhöheiconAndTextPadding: 4, // Der Rand zwischen dem innersten Text und dem Symbolduration: 8000, // Dauer der Drehtischrotationsanimationrate: 1.5, // Ermittelt durch Dauer s / Anzahl der Kreiseborder: 'border: 10rpx solid #FEFAE4;', // Drehtischrandease: 'ease-out' // Drehtischanimation};