幸运大转盘抽奖（前端uniapp）_六天鸭_uniapp 抽奖

大大的周 02-07 8096

幸运大转盘抽奖（前端js）在一个商城项目中用到了大转盘抽奖，来此记录一下，样式和图片自己微调一下就好了！！！

<template> <view class="collection"> <luckydraw class="luckydraw" @finish="drawFinished"></luckydraw> </view> </template> <script> import luckydraw from '@/components/luckydraw/index.vue'; export default { components: { luckydraw: luckydraw }, data() { return { } }, onShow() { }, methods: { //接收转盘结束事件 drawFinished(){ }, } } </script> <style lang="scss" scoped> </style>

下面是组件代码

<template> <view class="lucky-draw" :style="scale"> <image class="lucky-draw__bg" src="./images/background.png" mode="widthFix" style="width: 750rpx;"></image> <view class="lucky-draw__objects" :style="rotateStyle"> <image src="./images/objects-bg.png" class="lucky-draw__objects__bg"></image> <view class="lucky-draw__objects__object" v-for="(item, index) in dataA" :key="index" :style="{ transform: `translate(-50%) rotate(${(360 / 8) * index}deg)`, }"> <view class="lucky-draw__objects__object__title">{{ item.name }}</view> <image class="lucky-draw__objects__object__icon" :src="item.reward_image"></image> </view> </view> <image class="lucky-draw__start" src="./images/start.png" @click="starta()"></image> </view> </template> <script> export default { name: "lucky-draw", data() { return { dataA: [{ amount: "0", id: 1, name: "99999现金奖励", probability: 10, reward_image: "/static/images/ces.png", type: "1" }, { amount: "200", id: 2, name: "手表", probability: 20, reward_image: "/static/images/ces.png", type: "2" }, { amount: "0", id: 3, name: "iPhone13", probability: 1, reward_image: "/static/images/ces.png", type: "1" }, { amount: "0", id: 4, name: "华为P50", probability: 80, reward_image: "/static/images/ces.png", type: "2" }, { amount: "0", id: 5, name: "apple", probability: 0, reward_image: "/static/images/ces.png", type: "1" }, { amount: "8000", id: 6, name: "电脑", probability: 1, reward_image: "/static/images/ces.png", type: "1" }, { amount: "0", id: 7, name: "水", probability: 0, reward_image: "/static/images/ces.png", type: "1" }, { amount: "0", id: 8, name: "500积分", probability: 0, reward_image: "/static/images/ces.png", type: "1" } ], isStart: true,//为了不连续点击 rotateAngle: 0, // 旋转角度 cycle: 1, // 第几次抽奖 }; }, computed: { rotateStyle() { return ` -webkit-transition: transform ${this.duration}ms ${this.mode}; transition: transform ${this.duration}ms ${this.mode}; -webkit-transform: rotate(${this.rotateAngle}deg); transform: rotate(${this.rotateAngle}deg);`; }, scale() { return `transform: scale(${this.size / 686})`; }, }, props: { duration: { // 总旋转时间 ms级 type: Number, default: 5000, }, circle: { // 旋转圈数 type: Number, default: 5, }, mode: { // 由快到慢惯性效果都省了 type: String, default: "cubic-bezier(0.2, 0, 0, 1)", }, size: { type: Number, default: 686, }, config: { type: Object, default: () => ({}), }, type: { type: Number, default: 0, }, }, created() { }, methods: { starta() { if(this.isStart){ var ida = Math.ceil(Math.random()*10); //这里我是写的一个随机数。 //当后台返回我所获得的奖项id，根据id和数组里的比较，相等则旋转到奖品角度 this.isStart = false; this.rotateAngle = this.circle * 360 * this.cycle - (360 / 8 + (this.dataA.findIndex((item) => item.id == ida) - 1) * (360 / 8)); this.cycle++; setTimeout(() => { this.dataA.forEach((item)=>{ if(item.id == ida ){ uni.showToast({ title: '恭喜您获得' + item.name, icon: "none" }) this.isStart = true; this.$emit("finish");//向父组件发送结束事件 } }) }, 6000) } }, }, }; </script> <style scoped lang="scss"> .lucky-draw { position: relative; width: fit-content; &__bg { width: 686rpx; display: block; } &__lights { position: absolute !important; width: 676rpx; left: 6rpx; top: 10rpx; display: block; animation: infinite 1s alternate lights steps(1, end); } &__objects { position: absolute; top: 49rpx; left: 135rpx; right: 63rpx; bottom: 78rpx; width: 500rpx; height: 500rpx; &__bg { position: absolute; width: 500rpx; height: 500rpx; } &__object { position: absolute; left: 50%; transform: translateX(-50%); top: 0; transform-origin: 50% 250rpx; &__title { margin-top: 62rpx; color: #4E0691; font-size: 20rpx; -webkit-transform: scale(0.7); } &__icon { width: 52rpx; height: 52rpx; display: block; margin: 18rpx auto 0; } } } &__start { width: 150rpx; height: 170rpx; display: block; position: absolute; left: 300rpx; top: 202rpx; } } @keyframes lights { 0% { transform: rotate(0deg); } 50% { transform: rotate(15deg); } 100% { transform: rotate(0deg); } } </style>

看图片命名换成自己的就好