基于Vue.js的輪盤(pán)抽獎(jiǎng)
記錄一下使用心得,這里不再?gòu)U話(huà),直接上代碼好吧~
目錄
1. html
2. data()
3. 輪盤(pán)邏輯
4. 點(diǎn)擊事件觸發(fā)
1.html
// 輪盤(pán)抽獎(jiǎng)
<div class="lottery posRel">
<div
class="rotate posAbs"
:style="{transform:rotate_angle,transition:rotate_transition}"
>
//輪盤(pán)圖片
<img
src=""
class="disImg"
/>
</div>
//指針圖片
<img
src=""
class="startButton posAbs"
@click="startFn()"
/>
</div>
2.data()
start_rotating_degree: 0, // 初始旋轉(zhuǎn)角度
rotate_angle: 0, // 將要旋轉(zhuǎn)的角度
start_rotating_degree_pointer: 0, // 指針初始旋轉(zhuǎn)角度
rotate_angle_pointer: 0, // 指針將要旋轉(zhuǎn)的度數(shù)
rotate_transition: "transform 7s ease-in-out", // 初始化選中的過(guò)度屬性控制
click_flag: true, // 是否可以旋轉(zhuǎn)抽獎(jiǎng)
3.輪盤(pán)邏輯
rotating(index) {
? ? ? ? if (!this.click_flag) return;
? ? ? ? let duringTime = 6; // 默認(rèn)為1s
? ? ? ? let resultAngle = [0, 300, 240, 180, 120, 60]; // 最終會(huì)旋轉(zhuǎn)到下標(biāo)的位置所需要的度數(shù)? [0, 45, 88, 135, 180, 225, 270, 315, 0]
? ? ? ? let random = Math.floor(Math.random() * 6);
? ? ? ? this.click_flag = false; // 旋轉(zhuǎn)結(jié)束前盆犁，不允許再次觸發(fā)
? ? ? ? // 轉(zhuǎn)動(dòng)盤(pán)子
? ? ? ? let rotateAngle =
? ? ? ? ? this.start_rotating_degree +
? ? ? ? ? (random + 8) * 360 +
? ? ? ? ? resultAngle[index] -
? ? ? ? ? (this.start_rotating_degree % 360);
? ? ? ? this.start_rotating_degree = rotateAngle;
? ? ? ? this.rotate_angle = `rotate(${rotateAngle}deg)`;
? ? ? ? let self = this;
? ? ? ? // 旋轉(zhuǎn)結(jié)束后阿浓，允許再次觸發(fā)
? ? ? ? setTimeout(() => {
? ? ? ? ? self.click_flag = true;
? ? ? ? }, duringTime * 1000 + 1000); // 延時(shí)，保證轉(zhuǎn)盤(pán)轉(zhuǎn)完
? ? ? }
4.點(diǎn)擊事件觸發(fā)
startFn() {
this.rotating(0);
}
