vue組件實現(xiàn)移動端九宮格轉(zhuǎn)盤抽獎

更新時間：2020年10月16日 17:14:11 作者：Kevinblant

這篇文章主要為大家詳細(xì)介紹了vue組件實現(xiàn)移動端九宮格轉(zhuǎn)盤抽獎，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue組件實現(xiàn)移動端九宮格轉(zhuǎn)盤抽獎的具體代碼，供大家參考，具體內(nèi)容如下

vue-lucky-draw

移動端九宮格轉(zhuǎn)盤抽獎vue組件，中獎的獎品數(shù)據(jù)由接口決定。

效果圖

抽獎

因為中獎的結(jié)果是后臺返回的，所以要考慮轉(zhuǎn)盤的最終停下來的位置必須是在對應(yīng)后臺返回結(jié)果的獎品的位置，也就是要模擬出這個中獎的過程（所以所謂的抽獎都是騙人的，嘿嘿）。先要寫出移動的背景框?qū)?yīng)的各個位置的css，然后動態(tài)切換class來使其呈現(xiàn)出轉(zhuǎn)動效果。明白了過程就好寫了。

中間的按鈕用的是css3的animation，我這個獎品是合在了一張圖上，你也可以分開成8張小圖，那樣需要寫更多的樣式。

// 抽獎
 handleStart() {
 if (this.isRuningLucky) {
  return Toast("正在抽獎中...");
 }
 if (isNaN(Number(this.initSpeed))) {
  return false;
 }
 this.speed = this.initSpeed;
 // 開始抽獎
 this.isRuningLucky = true;
 this.time = Date.now();
 this.drawAward();
 Toast("開始抽獎");
 },
 drawAward() {
 // 請求接口，模擬一個抽獎數(shù)據(jù)(假設(shè)請求時間為2s)
 setTimeout(() => {
  this.award = {
  id: "4"
  };
  console.log("返回的抽獎結(jié)果是", this.award);
 }, 2000);
 this.move();
 },
 move() {
 let timer = setTimeout(() => {
  this.current++;
  if (this.current > 7) {
  this.current = 0;
  }
  // 若抽中的獎品id存在，則開始減速轉(zhuǎn)動
  if (this.award.id && (Date.now() - this.time) / 1000 > 2) {
  console.log("獎品出來了");
  this.speed += this.diff; // 轉(zhuǎn)動減速
  
  // 若轉(zhuǎn)動時間超過4秒，并且獎品id等于小格子的獎品id，則停下來
  if (
   (Date.now() - this.time) / 1000 > 4 &&
   this.award.id == this.awards[this.current].id
  ) {
   clearTimeout(timer);

   setTimeout(() => {
   this.isRuningLucky = false;
   // 這里寫停下來要執(zhí)行的操作（彈出獎品框）
   Toast(
    "您抽中的獎品是" + this.awards[this.current].name + ",獎品id是" + this.awards[this.current].id
   );
   }, 400);
   return;
  }

  // 若抽中的獎品不存在，則加速轉(zhuǎn)動
  } else {
  if (this.speed >= 50) {
   this.speed -= this.diff; // 轉(zhuǎn)動加速
  }
  }

  this.move();
 }, this.speed);
 },

號碼滾動

使用無序列表將號碼列表（正常是從接口獲?。┭h(huán)出來，通過設(shè)置定時以及控制transition的屬性，來達(dá)到無縫連接的效果。如果樣式（li高度）改變的話，需要對定時器時間進(jìn)行調(diào)節(jié)（控制下一個顯示的時間）。

// 中獎名單滾動
 scroll() {
 this.animate = true;
 let timer = setTimeout(() => {
  this.list.push(this.list[0]);
  this.list.shift();
  this.animate = false;
 }, 500);
 }

功能代碼請移步到我的GitHub
可以clone項目 npm i , npm run dev，喜歡的話點個星吧_~

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: