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

抽獎(jiǎng)
因?yàn)橹歇?jiǎng)的結(jié)果是后臺(tái)返回的,所以要考慮轉(zhuǎn)盤(pán)的最終停下來(lái)的位置必須是在對(duì)應(yīng)后臺(tái)返回結(jié)果的獎(jiǎng)品的位置,也就是要模擬出這個(gè)中獎(jiǎng)的過(guò)程(所以所謂的抽獎(jiǎng)都是騙人的,嘿嘿)。先要寫(xiě)出移動(dòng)的背景框?qū)?yīng)的各個(gè)位置的css,然后動(dòng)態(tài)切換class來(lái)使其呈現(xiàn)出轉(zhuǎn)動(dòng)效果。明白了過(guò)程就好寫(xiě)了。
中間的按鈕用的是css3的animation,我這個(gè)獎(jiǎng)品是合在了一張圖上,你也可以分開(kāi)成8張小圖,那樣需要寫(xiě)更多的樣式。
// 抽獎(jiǎng)
handleStart() {
if (this.isRuningLucky) {
return Toast("正在抽獎(jiǎng)中...");
}
if (isNaN(Number(this.initSpeed))) {
return false;
}
this.speed = this.initSpeed;
// 開(kāi)始抽獎(jiǎng)
this.isRuningLucky = true;
this.time = Date.now();
this.drawAward();
Toast("開(kāi)始抽獎(jiǎng)");
},
drawAward() {
// 請(qǐng)求接口,模擬一個(gè)抽獎(jiǎng)數(shù)據(jù)(假設(shè)請(qǐng)求時(shí)間為2s)
setTimeout(() => {
this.award = {
id: "4"
};
console.log("返回的抽獎(jiǎng)結(jié)果是", this.award);
}, 2000);
this.move();
},
move() {
let timer = setTimeout(() => {
this.current++;
if (this.current > 7) {
this.current = 0;
}
// 若抽中的獎(jiǎng)品id存在,則開(kāi)始減速轉(zhuǎn)動(dòng)
if (this.award.id && (Date.now() - this.time) / 1000 > 2) {
console.log("獎(jiǎng)品出來(lái)了");
this.speed += this.diff; // 轉(zhuǎn)動(dòng)減速
// 若轉(zhuǎn)動(dòng)時(shí)間超過(guò)4秒,并且獎(jiǎng)品id等于小格子的獎(jiǎng)品id,則停下來(lái)
if (
(Date.now() - this.time) / 1000 > 4 &&
this.award.id == this.awards[this.current].id
) {
clearTimeout(timer);
setTimeout(() => {
this.isRuningLucky = false;
// 這里寫(xiě)停下來(lái)要執(zhí)行的操作(彈出獎(jiǎng)品框)
Toast(
"您抽中的獎(jiǎng)品是" + this.awards[this.current].name + ",獎(jiǎng)品id是" + this.awards[this.current].id
);
}, 400);
return;
}
// 若抽中的獎(jiǎng)品不存在,則加速轉(zhuǎn)動(dòng)
} else {
if (this.speed >= 50) {
this.speed -= this.diff; // 轉(zhuǎn)動(dòng)加速
}
}
this.move();
}, this.speed);
},
號(hào)碼滾動(dòng)
使用無(wú)序列表將號(hào)碼列表(正常是從接口獲取)循環(huán)出來(lái),通過(guò)設(shè)置定時(shí)以及控制transition的屬性,來(lái)達(dá)到無(wú)縫連接的效果。如果樣式(li高度)改變的話,需要對(duì)定時(shí)器時(shí)間進(jìn)行調(diào)節(jié)(控制下一個(gè)顯示的時(shí)間)。
// 中獎(jiǎng)名單滾動(dòng)
scroll() {
this.animate = true;
let timer = setTimeout(() => {
this.list.push(this.list[0]);
this.list.shift();
this.animate = false;
}, 500);
}
功能代碼請(qǐng)移步到我的GitHub
可以clone項(xiàng)目 npm i , npm run dev,喜歡的話點(diǎn)個(gè)星吧_~
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- vue3實(shí)現(xiàn)抽獎(jiǎng)模板設(shè)置
- vue實(shí)現(xiàn)大轉(zhuǎn)盤(pán)抽獎(jiǎng)功能
- Vue組件實(shí)現(xiàn)數(shù)字滾動(dòng)抽獎(jiǎng)效果
- vue實(shí)現(xiàn)宮格輪轉(zhuǎn)抽獎(jiǎng)
- VUE實(shí)現(xiàn)大轉(zhuǎn)盤(pán)抽獎(jiǎng)
- vue簡(jiǎn)單實(shí)現(xiàn)轉(zhuǎn)盤(pán)抽獎(jiǎng)
- Vue.js實(shí)現(xiàn)大轉(zhuǎn)盤(pán)抽獎(jiǎng)總結(jié)及實(shí)現(xiàn)思路
- 基于VUE實(shí)現(xiàn)的九宮格抽獎(jiǎng)功能
- vue實(shí)現(xiàn)手機(jī)號(hào)碼抽獎(jiǎng)上下滾動(dòng)動(dòng)畫(huà)示例
- vue組件封裝實(shí)現(xiàn)抽獎(jiǎng)隨機(jī)數(shù)
相關(guān)文章
vue打包之后配置統(tǒng)一請(qǐng)求地址步驟詳解
這篇文章主要為大家介紹了vue打包之后配置統(tǒng)一請(qǐng)求地址實(shí)現(xiàn)步驟詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07
Vue實(shí)現(xiàn)商品飛入購(gòu)物車(chē)效果(電商項(xiàng)目)
這篇文章主要介紹了Vue實(shí)現(xiàn)商品飛入購(gòu)物車(chē)效果(電商項(xiàng)目),這種效果在一些電商平臺(tái)經(jīng)常會(huì)用到,今天小編通過(guò)代碼詳解,需要的朋友可以參考下2019-11-11
基于Vue封裝實(shí)現(xiàn)全屏功能工具類(lèi)
在?Web?應(yīng)用程序中,有時(shí)需要為某些內(nèi)容提供全屏顯示的功能,本文將介紹如何使用?Vue.js?3?的?Composition?API?創(chuàng)建一個(gè)全屏功能的工具類(lèi),希望對(duì)大家有所幫助2024-03-03
詳解Vue實(shí)戰(zhàn)指南之依賴(lài)注入(provide/inject)
這篇文章主要介紹了詳解Vue實(shí)戰(zhàn)指南之依賴(lài)注入(provide/inject),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
vue項(xiàng)目打包解決靜態(tài)資源無(wú)法加載和路由加載無(wú)效(404)問(wèn)題
這篇文章主要介紹了vue項(xiàng)目打包,解決靜態(tài)資源無(wú)法加載和路由加載無(wú)效(404)問(wèn)題,靜態(tài)資源無(wú)法使用,那就說(shuō)明項(xiàng)目打包后,圖片和其他靜態(tài)資源文件相對(duì)路徑不對(duì),本文給大家介紹的非常詳細(xì),需要的朋友跟隨小編一起看看吧2023-10-10

