vue組件實現(xiàn)移動端九宮格轉(zhuǎn)盤抽獎
本文實例為大家分享了vue組件實現(xiàn)移動端九宮格轉(zhuǎn)盤抽獎的具體代碼,供大家參考,具體內(nèi)容如下
vue-lucky-draw
移動端九宮格轉(zhuǎn)盤抽獎vue組件,中獎的獎品數(shù)據(jù)由接口決定。
效果圖

抽獎
因為中獎的結(jié)果是后臺返回的,所以要考慮轉(zhuǎn)盤的最終停下來的位置必須是在對應后臺返回結(jié)果的獎品的位置,也就是要模擬出這個中獎的過程(所以所謂的抽獎都是騙人的,嘿嘿)。先要寫出移動的背景框?qū)母鱾€位置的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ù)(假設請求時間為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);
},
號碼滾動
使用無序列表將號碼列表(正常是從接口獲取)循環(huán)出來,通過設置定時以及控制transition的屬性,來達到無縫連接的效果。如果樣式(li高度)改變的話,需要對定時器時間進行調(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)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解Vue實戰(zhàn)指南之依賴注入(provide/inject)
這篇文章主要介紹了詳解Vue實戰(zhàn)指南之依賴注入(provide/inject),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
vue項目打包解決靜態(tài)資源無法加載和路由加載無效(404)問題
這篇文章主要介紹了vue項目打包,解決靜態(tài)資源無法加載和路由加載無效(404)問題,靜態(tài)資源無法使用,那就說明項目打包后,圖片和其他靜態(tài)資源文件相對路徑不對,本文給大家介紹的非常詳細,需要的朋友跟隨小編一起看看吧2023-10-10

