2021-01-19 14-32-53.gif
實(shí)現(xiàn)思路:
1.要想實(shí)現(xiàn)從 特 - 1 - 2 - 3 - 4 - 5 - 6 - 7的方向執(zhí)行榨汤，必須要在css內(nèi)對(duì)標(biāo)簽進(jìn)行position定位處理屑埋，以便于實(shí)現(xiàn)走馬燈的效果
2.借助setTimeout計(jì)時(shí)器的方法帜慢，通過遞歸改變time來實(shí)現(xiàn)由快變慢的效果
配置參數(shù):
winner: 0, //指定獲獎(jiǎng)下標(biāo) specified為true時(shí)生效
specified: true, //是否指定獲獎(jiǎng)結(jié)果，false時(shí)為隨機(jī)
list: [], //抽獎(jiǎng)列表
//----------------------上面的為主要參數(shù)--------------------------
rollIndex: -1, //轉(zhuǎn)動(dòng)時(shí)的下標(biāo)位置
prize: -1, // 中獎(jiǎng)位置
count: 8, // 總共有多少個(gè)位置
speed: 100, // 初始轉(zhuǎn)動(dòng)速度
cycle: 50, // 轉(zhuǎn)動(dòng)基本次數(shù)：即至少需要轉(zhuǎn)動(dòng)多少次再進(jìn)入抽獎(jiǎng)環(huán)節(jié)
rolling: false, //是否處于抽獎(jiǎng)狀態(tài)，防止多次點(diǎn)擊
timer: null, // 每次轉(zhuǎn)動(dòng)定時(shí)器
times: 0, // 轉(zhuǎn)動(dòng)次數(shù)
$lottery_w: 5rem; //每個(gè)獎(jiǎng)品的寬高
$lottery_h: 5rem; //每個(gè)獎(jiǎng)品的寬高
$lottery_margin: 0.2rem; //每個(gè)獎(jiǎng)品的間隔
代碼如下：
<template>
<div class="overall">
<div class="lottery-box">
<div class="lottery" v-for="(i,index) in list" :key="index">
<div class="item" :class="{'on':index == rollIndex}">{{i.title}}</div>
</div>
<div class="start" @click="start()">抽獎(jiǎng)</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
winner: 0, //指定獲獎(jiǎng)下標(biāo) specified為true時(shí)生效
specified: true, //是否指定獲獎(jiǎng)結(jié)果巩剖，false時(shí)為隨機(jī)
rollIndex: -1, //轉(zhuǎn)動(dòng)時(shí)的下標(biāo)位置
prize: -1, // 中獎(jiǎng)位置
count: 8, // 總共有多少個(gè)位置
speed: 100, // 初始轉(zhuǎn)動(dòng)速度
cycle: 50, // 轉(zhuǎn)動(dòng)基本次數(shù)：即至少需要轉(zhuǎn)動(dòng)多少次再進(jìn)入抽獎(jiǎng)環(huán)節(jié)
rolling: false, //是否處于抽獎(jiǎng)狀態(tài)，防止多次點(diǎn)擊
timer: null, // 每次轉(zhuǎn)動(dòng)定時(shí)器
times: 0, // 轉(zhuǎn)動(dòng)次數(shù)
list: [
{
title: '特等獎(jiǎng)'
},
{
title: '一等獎(jiǎng)'
},
{
title: '二等獎(jiǎng)'
},
{
title: '三等獎(jiǎng)'
},
{
title: '四等獎(jiǎng)'
},
{
title: '五等獎(jiǎng)'
},
{
title: '六等獎(jiǎng)'
},
{
title: '七等獎(jiǎng)'
}
]
}
},
methods: {
start() {
if (!this.rolling) {
this.startRoll()
}
},
//開始轉(zhuǎn)動(dòng)方法
startRoll() {
this.rolling = true //開啟轉(zhuǎn)動(dòng)狀態(tài)
this.times += 1 // 轉(zhuǎn)動(dòng)次數(shù)
this.oneRoll() // 轉(zhuǎn)動(dòng)過程調(diào)用的每一次轉(zhuǎn)動(dòng)方法，這里是第一次調(diào)用初始化
// 如果當(dāng)前轉(zhuǎn)動(dòng)次數(shù)達(dá)到要求 && 目前轉(zhuǎn)到的位置是中獎(jiǎng)位置
if (this.times > this.cycle + 10 && this.prize === this.rollIndex) {
clearTimeout(this.timer) // 清除轉(zhuǎn)動(dòng)定時(shí)器暑始，停止轉(zhuǎn)動(dòng)
//初始化相關(guān)數(shù)據(jù)
this.times = this.$options.data().times
this.speed = this.$options.data().speed
setTimeout(res => {
this.rolling = false
alert(`恭喜你抽中了${this.list[this.rollIndex].title}`)
}, 500)
} else {
if (this.times < this.cycle) {
this.speed -= 10 // 加快轉(zhuǎn)動(dòng)速度
} else if (this.times === this.cycle) {
//當(dāng)轉(zhuǎn)動(dòng)次數(shù)達(dá)到規(guī)定的 必要轉(zhuǎn)動(dòng)次數(shù)后 開始確定中獎(jiǎng)位置
//判斷是否指定獲獎(jiǎng)結(jié)果，false時(shí)為隨機(jī)
if (this.specified) {
this.prize = this.winner
} else {
const index = this.random(0, this.count - 1) // 隨機(jī)獲得一個(gè)中獎(jiǎng)位置
this.prize = index //中獎(jiǎng)位置,可由后臺(tái)返回
}
} else {
//當(dāng)轉(zhuǎn)動(dòng)次數(shù)times > cycle規(guī)定停止的轉(zhuǎn)次時(shí)婴削，開始慢慢減速廊镜，直到達(dá)到指定的中獎(jiǎng)位置
this.speed += 20
}
//當(dāng)轉(zhuǎn)速達(dá)到一定高度時(shí)，就固定為40ms/轉(zhuǎn)
if (this.speed < 40) {
this.speed = 40
}
this.timer = setTimeout(this.startRoll, this.speed)
}
},
// 每一次轉(zhuǎn)動(dòng)
oneRoll() {
let index = this.rollIndex // 當(dāng)前轉(zhuǎn)動(dòng)到哪個(gè)位置
const count = this.count // 總共有多少個(gè)位置
index += 1
if (index > count - 1) {
index = 0
}
this.rollIndex = index
},
random(min, max) {
return parseInt(Math.random() * (max - min + 1) + min)
}
}
}
</script>
<style lang="scss" scoped>
$lottery_w: 5rem; //每個(gè)獎(jiǎng)品的寬高
$lottery_h: 5rem; //每個(gè)獎(jiǎng)品的寬高
$lottery_margin: 0.2rem; //每個(gè)獎(jiǎng)品的間隔
.lottery-box {
position: relative;
//抽獎(jiǎng)盒子寬高 因?yàn)槭?3*3布局唉俗，所以這里*3
width: $lottery_w * 3;
height: $lottery_h * 3;
//抽獎(jiǎng)按鈕樣式
.start {
width: $lottery_w - $lottery_margin * 2;
height: $lottery_h - $lottery_margin * 2;
background: rgb(8, 230, 218);
position: absolute;
top: $lottery_h + $lottery_margin;
left: $lottery_w + $lottery_margin;
border-radius: 0.5rem;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
//每個(gè)獎(jiǎng)品的外層樣式
.lottery {
background: #fcfcfc;
width: $lottery_w;
height: $lottery_h;
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
padding: $lottery_margin;
// 每個(gè)獎(jiǎng)品的內(nèi)容樣式
.item {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
border-radius: 0.5rem;
box-shadow: 0 0 5px #ccc;
//轉(zhuǎn)動(dòng)時(shí)的高亮效果
&.on {
background: rgb(92, 245, 199);
color: white;
font-weight: bold;
}
}
}
//針對(duì)每個(gè)獎(jiǎng)品塊單獨(dú)調(diào)整位置嗤朴，以便適應(yīng)于跑馬燈的效果
.lottery:nth-child(1) {
left: 0;
top: 0;
}
.lottery:nth-child(2) {
top: 0 * $lottery_h;
left: $lottery_w;
}
.lottery:nth-child(3) {
top: 0 * $lottery_h;
left: 2 * $lottery_w;
}
.lottery:nth-child(4) {
top: 1 * $lottery_h;
left: 2 * $lottery_w;
}
.lottery:nth-child(5) {
top: 2 * $lottery_h;
left: 2 * $lottery_w;
}
.lottery:nth-child(6) {
top: 2 * $lottery_h;
left: 1 * $lottery_w;
}
.lottery:nth-child(7) {
top: 2 * $lottery_h;
left: 0 * $lottery_w;
}
.lottery:nth-child(8) {
top: 1 * $lottery_h;
left: 0 * $lottery_w;
}
}
</style>
