目前抽奖最常见的两种：九宫格抽奖 和 转盘抽奖，但转盘抽奖的大多是采用的是将做好的图放在页面上，如果需要变动奖池里面的奖品或数量，就会让设计师重新出一张图片。
分享我自己在自定义转盘抽奖的样式布局思路
<template>
<div class="main">
<Top massage="转盘抽奖" />
<div class="lottery">
<div
class="lottery-wheel"
:style="{
'-webkit-transition': wheelTransition,
'-webkit-transform': rotateAngle,
}"
>
<ul class="prize-list">
<li
class="prize-item"
v-for="(item, index) in prizeList"
:key="index"
>
<img :src="item.prize_pic" alt />
</li>
</ul>
</div>
<div class="lotterydraw">
<img
@click="lotterydraw"
src="https://rzlhhr.oss-cn-beijing.aliyuncs.com/20220622/45526aa2-8c45-4edf-8582-d807f33f070c.png"
alt="抽奖按钮"
/>
</div>
</div>
<!-- 中奖结果 -->
<div class="lotteryname" v-if="lotteryshow">恭喜你中奖{{ lotteryname }}</div>
</div>
</template>
<script>
import Top from "../../components/Top.vue";
export default {
components: {
Top,
},
data() {
return {
LuckyIndex: 0, // 回馈下标
wheelStartRotateDegree: 0, // 转盘初始化角度
wheelTransition: "transform 5s ease-in-out", // 初始化转盘
rotateAngle: 0, // 转盘要转的角度
rotating: false, //转盘完成在次开始判断
prizeList: [
{
prize_pic:
"https://rzlhhr.oss-cn-beijing.aliyuncs.com/20240808/b946efd8-84a9-4132-9d9a-2e8519b83768.png",
prize_key: "1",
},
{
prize_pic:
"https://rzlhhr.oss-cn-beijing.aliyuncs.com/20240808/0c6b4386-62c7-4220-8b13-845c5172f038.png",
prize_key: "2",
},
{
prize_pic:
"https://rzlhhr.oss-cn-beijing.aliyuncs.com/20240808/1dcb8b1f-9fe3-4571-bf06-67f8fc686ed3.png",
prize_key: "3",
},
{
prize_pic:
"https://rzlhhr.oss-cn-beijing.aliyuncs.com/20240808/62b883ff-f414-4181-b509-15797e8940ec.png",
prize_key: "4",
},
{
prize_pic:
"https://rzlhhr.oss-cn-beijing.aliyuncs.com/20240808/0658113a-c36d-4c51-8cf7-b54bde999d68.png",
prize_key: "5",
},
{
prize_pic:
"https://rzlhhr.oss-cn-beijing.aliyuncs.com/20240808/1d23e14e-2bd7-4db2-a4fe-eef27e24b102.png",
prize_key: "6",
},
], //转盘数据
lotteryname: "", //中奖奖品名称
lotteryshow: false,
};
},
methods: {
lotterydraw() {
if (!this.rotating) {
//这我设置的是15元,自己可以改参数，这里也可以调后端接口，中奖概率后端来配置，返回前端中奖结果，然后开始转盘动画
let prize_key = "4"; //中奖标识
this.lotteryname = "15元"; //中奖奖品名称
// 转盘方法
this.gameRotate(prize_key, this.prizeList);
}
},
// 转盘逻辑
gameRotate(prize_key, prizeList) {
this.rotating = true;
const len = prizeList.length;
//这里循环判断转盘数据的prize_key和中奖的prize_key匹配
for (let i = 0; i < len; i++) {
if (prizeList[i].prize_key === prize_key) {
this.LuckyIndex = i;
}
}
const result = [360, 300, 240, 180, 120, 60];
let FIXED_TIMES = 5;
const addDegree = (FIXED_TIMES + 1) * 360;
let rotateAngleNum =
this.wheelStartRotateDegree +
addDegree +
result[this.LuckyIndex] -
(this.wheelStartRotateDegree % 360);
this.wheelStartRotateDegree = rotateAngleNum; // 转盘初始化角度
this.rotateAngle = `rotate(${rotateAngleNum}deg)`; //转盘要转的角度
setTimeout(() => {
this.gameover();
}, FIXED_TIMES * 1000 + 600); // 延时，保证转盘转完
},
// 转盘转完可再次转
gameover() {
this.rotating = false;
// 中奖奖品
this.lotteryshow = true;
},
},
created() {},
mounted() {},
};
</script>
<style lang='scss' scoped>
//转盘
.lottery {
width: 100%;
position: absolute;
top: 15vw;
z-index: 1;
}
.lottery-wheel {
width: 95vw;
height: 95vw;
margin: auto;
background: url(https://rzlhhr.oss-cn-beijing.aliyuncs.com/20220622/b6427910-e086-4df1-9537-8700108e2690.png)
0 0 no-repeat;
background-size: 95vw 95vw;
.prize-list {
position: relative;
width: 100%;
height: 100%;
.prize-item {
display: flex;
align-items: center;
flex-direction: column;
img {
width: 15vw;
height: 15vw;
}
}
// 奖品样式
.prize-item:nth-child(1) {
position: absolute;
top: 18%;
left: 42%;
transform: rotate(0);
}
.prize-item:nth-child(2) {
position: absolute;
top: 31%;
left: 62%;
transform: rotate(60deg);
}
.prize-item:nth-child(3) {
position: absolute;
top: 55%;
left: 63%;
transform: rotate(120deg);
}
.prize-item:nth-child(4) {
position: absolute;
top: 64%;
left: 42%;
transform: rotate(180deg);
}
.prize-item:nth-child(5) {
position: absolute;
top: 55%;
left: 21%;
transform: rotate(240deg);
}
.prize-item:nth-child(6) {
position: absolute;
top: 31%;
left: 22%;
transform: rotate(300deg);
}
}
}
.lotterydraw {
position: absolute;
left: 50%;
top: 48%;
margin-top: -10vw;
margin-left: -10vw;
z-index: 5;
img {
width: 20vw;
}
}
.lotteryname{
position: absolute;
top: 120vw;
width: 100%;
text-align: center;
}
</style>整个转盘抽奖布局分为两部分：底部转盘背景图 和 奖品内容布局
转盘效果
<iframe allowfullscreen="true" data-mediaembed="csdn" frameborder="0" id="qa2joCnx-1723106976009" src="https://live.csdn.net/v/embed/416012"></iframe>
转盘效果
标签：vue,prize,top,key,position,手写,转盘,absolute From： https://blog.csdn.net/qq_47111583/article/details/141030381