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

抽獎(jiǎng)
因?yàn)橹歇?jiǎng)的結(jié)果是后臺(tái)返回的,所以要考慮轉(zhuǎn)盤的最終停下來的位置必須是在對(duì)應(yīng)后臺(tái)返回結(jié)果的獎(jiǎng)品的位置,也就是要模擬出這個(gè)中獎(jiǎng)的過程(所以所謂的抽獎(jiǎng)都是騙人的,嘿嘿)。先要寫出移動(dòng)的背景框?qū)?yīng)的各個(gè)位置的css,然后動(dòng)態(tài)切換class來使其呈現(xiàn)出轉(zhuǎn)動(dòng)效果。明白了過程就好寫了。
中間的按鈕用的是css3的animation,我這個(gè)獎(jiǎng)品是合在了一張圖上,你也可以分開成8張小圖,那樣需要寫更多的樣式。
// 抽獎(jiǎng)
handleStart() {
if (this.isRuningLucky) {
return Toast("正在抽獎(jiǎng)中...");
}
if (isNaN(Number(this.initSpeed))) {
return false;
}
this.speed = this.initSpeed;
// 開始抽獎(jiǎng)
this.isRuningLucky = true;
this.time = Date.now();
this.drawAward();
Toast("開始抽獎(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存在,則開始減速轉(zhuǎn)動(dòng)
if (this.award.id && (Date.now() - this.time) / 1000 > 2) {
console.log("獎(jiǎng)品出來了");
this.speed += this.diff; // 轉(zhuǎn)動(dòng)減速
// 若轉(zhuǎn)動(dòng)時(shí)間超過4秒,并且獎(jiǎng)品id等于小格子的獎(jiǎng)品id,則停下來
if (
(Date.now() - this.time) / 1000 > 4 &&
this.award.id == this.awards[this.current].id
) {
clearTimeout(timer);
setTimeout(() => {
this.isRuningLucky = false;
// 這里寫停下來要執(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)
使用無序列表將號(hào)碼列表(正常是從接口獲?。┭h(huán)出來,通過設(shè)置定時(shí)以及控制transition的屬性,來達(dá)到無縫連接的效果。如果樣式(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)盤抽獎(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)盤抽獎(jiǎng)
- vue簡(jiǎn)單實(shí)現(xiàn)轉(zhuǎn)盤抽獎(jiǎng)
- Vue.js實(shí)現(xiàn)大轉(zhuǎ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)畫示例
- vue組件封裝實(shí)現(xiàn)抽獎(jiǎng)隨機(jī)數(shù)
相關(guān)文章
vue a標(biāo)簽點(diǎn)擊實(shí)現(xiàn)賦值方式
這篇文章主要介紹了vue a標(biāo)簽點(diǎn)擊實(shí)現(xiàn)賦值方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue項(xiàng)目設(shè)置打包后的靜態(tài)文件訪問路徑
這篇文章主要介紹了vue項(xiàng)目設(shè)置打包后的靜態(tài)文件訪問路徑,vue項(xiàng)目的最終項(xiàng)目文件需要經(jīng)過打包輸出,靜態(tài)文件的訪問路徑需要在vue.config.js文件中設(shè)置,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
詳解vue中使用axios對(duì)同一個(gè)接口連續(xù)請(qǐng)求導(dǎo)致返回?cái)?shù)據(jù)混亂的問題
這篇文章主要介紹了詳解vue中使用axios對(duì)同一個(gè)接口連續(xù)請(qǐng)求導(dǎo)致返回?cái)?shù)據(jù)混亂的問題,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue2.0實(shí)現(xiàn)倒計(jì)時(shí)的插件(時(shí)間戳 刷新 跳轉(zhuǎn) 都不影響)
我發(fā)現(xiàn)好多倒計(jì)時(shí)的插件,刷新都會(huì)變成從頭再來,于是自己用vue2.0寫了一個(gè),感覺還不錯(cuò),特此分享到腳本之家平臺(tái)供大家參考下2017-03-03
vue.js國(guó)際化 vue-i18n插件的使用詳解
本篇文章主要介紹了vue.js國(guó)際化 vue-i18n插件的使用詳解,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07
基于vue.js中關(guān)于下拉框的值默認(rèn)及綁定問題
今天小編就為大家分享一篇基于vue.js中關(guān)于下拉框的值默認(rèn)及綁定問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08

