Vue 九宫格抽奖实现

最近做了一个公司的活动项目，效果如图。本篇文章创作记录粗糙，只是当下先记下代码片段，后期我会抽时间优化。

1、页面搭建（创建index.vue）

首先要确定页面布局，class为start的div代表中间的开始按钮，同级的ul为九个奖品的位置。

我是采用父元素相对定位，li元素绝对定位。将每一个元素定位到页面上（当时一下想到的方案，欢迎有大佬提供不用怎么麻烦的布局方式）

<div class="luck-cont" v-if="loadingComplete"><div class="start" @click="start"><div class="start-content" v-if="activeExistFlag"><p>开始</p><p>抽奖</p></div><div class="start-content" v-else-if="!activeExistFlag && !notStartFlag"><p>活动</p><p>结束</p></div></div><ul class="luck-ul"><li v-for="(item, index) in prizes" :key="index":class="['item' + (index + 1), {'active': currentIndex == index}]"><div><img :src="item.img_path" /><p>{{item.prize_name}}</p></div><div class="mask" v-if="currentIndex == index"></div></li></ul>
</div>

2、相关CSS定位

.luck-cont {position: relative;width: 318px;height: 338px;background-color: #cb0e23;border-radius: 23px;}
.grid-tips {font-size: 12px;font-weight: 400;color: #fde4b7;text-align: center;padding-top: 6px;}
.luck-ul li {position: absolute;width: 96px;height: 96px;background: linear-gradient(135deg, #ffb5b4, #ffc3a5 100%);border-radius: 12px;}
.luck-ul li.item1 {left: 9px;top: 32px;}
.luck-ul li.item2 {left: 111px;top: 32px;}
.luck-ul li.item3 {left: 213px;top: 32px;}
.luck-ul li.item4 {left: 213px;top: 134px;}
.luck-ul li.item5 {left: 213px;top: 236px;}
.luck-ul li.item6 {left: 111px;top: 236px;}
.luck-ul li.item7 {left: 9px;top: 236px;}
.luck-ul li.item8 {left: 9px;top: 134px;}
.luck-ul li.active .mask {position: absolute;width: 96px;height: 96px;background: rgba(255, 172, 24, 0.60);border-radius: 12px;top: -6px;left: 0px}
.luck-ul li div {width: 84px;height: 84px;padding: 10px 0 0;margin: 6px auto;background: linear-gradient(135deg, #fff0e5, #ffdfc6 100%);border-radius: 12px;text-align: center;}
.luck-ul li div img {display: block;margin: 0 auto;height: 45px;}
.luck-ul li div p {color: #000;font-size: 10px;font-weight: 400;line-height: 20px}
.start {position: absolute;left: 111px;top: 134px;width: 96px;height: 96px;background: #fac246;border-radius: 94px;}
.start-content {width: 69px;height: 69px;background: #ff5f5a;border-radius: 84px;box-shadow: 0px 0px 15px 0px #cb0e23 inset;margin: 14px auto 0;color: #fff;font-weight: 400;font-size: 18px;text-align: center;padding-top: 8px;}
.start-content p:first-child {line-height: 22px;margin-top: 4px;}
.luck-active-content {padding: 0 15px 20px 24px; margin-top: 24px;}

3、相应JS逻辑（idnex.js）

中奖位置和是否能够参与抽奖、抽奖的次数都是调用后端的接口实现。相应的js方法都加了相应的注释。

本次代码开发难点在于得到中奖位置后，将转盘停止的方法（startRoll）方法。可能中间有不和逻辑的代码，欢迎大家指正。

data(){return{luckyNum: 2, // 抽奖次数prizes: [], // 奖品列表shareFlag: true, // 是否分享showShareFlag: false, // 分享成功弹层currentIndex: -1, // 当前转动到哪个位置，起点位置count: 8, // 总共有多少个位置timer: 0, // 每次转动定时器speed: 200, // 初始转动速度times: 0, // 转动次数cycle: 50, // 转动基本次数：即至少需要转动多少次再进入抽奖环节prize: -1, // 中奖位置}
}// 开始抽奖
start() {let vm = thisthis.getLuckDrawIndex()
},// 获取中奖位置
getLuckDrawIndex() {let _this = this// 返回中奖位置、剩余抽奖次数startLuckDraw(this.params).then(res => {if (res.code == 200) {this.startRoll()this.isLuckFlag = truethis.prizeInfo = res.contentthis.prize = _this.getPrizeIndex(res.content)this.quertSurplusCount()} else if (res.code == 300) {this.showPopFlag = truethis.isFollowFlag = falsethis.followImageUrl = res.contentthis.clearRoll()return} else {this.startRoll()this.prize = parseInt(Math.random() * 10, 0) > 5 ? 3 : 7this.isLuckFlag = falsethis.followTitps1 = res.messagethis.quertSurplusCount()}}).catch(error => {console.log(error)})
},startRoll() {let vm = thisthis.times += 1 // 转动次数this.oneRoll() // 转动过程调用的每一次转动方法，这里是第一次调用初始化// 如果当前转动次数达到要求 && 目前转到的位置是中奖位置if (this.times > this.cycle + 10 && this.prize === this.currentIndex) {clearTimeout(this.timer) // 清除转动定时器，停止转动this.prize = -1this.times = 0this.speed = 200this.click = true;var that = this;setTimeout(res => {if (that.isLuckFlag) {that.showToast = true;that.isReceive = false} else {that.showPopFlag = truethat.isFollowFlag = true}}, 500)} else {if (this.times < this.cycle) {this.speed -= 10 // 加快转动速度} else if (this.times === this.cycle) {if (this.prize > 7) {this.prize = 7}} else if (this.times > this.cycle + 10 && ((this.prize === 0 && this.currentIndex === 7) || this.prize === this.currentIndex + 1)) {this.speed += 110} else {this.speed += 20}if (this.speed < 40) {this.speed = 40}this.timer = setTimeout(this.startRoll, this.speed)}
},// 每一次转动
oneRoll() {let index = this.currentIndex // 当前转动到哪个位置const count = this.count // 总共有多少个位置index += 1if (index > count - 1) {index = 0}this.currentIndex = index
},clearRoll() {clearTimeout(this.timer) // 清除转动定时器，停止转动this.prize = -1this.times = 0this.speed = 200this.click = true;
},

放一个发现的有好多集成抽奖案例的网站：九宫格抽奖 | 基于 Js / TS / Vue / React / 微信小程序 / uni-app / Taro 的【大转盘 & 九宫格 & 老虎机】抽奖插件

本次分享结束~共勉！！！

Vue 九宫格抽奖实现相关推荐

vue九宫格抽奖dom记录
效果代码   <!-- 最后修改时间: 2022/10/ ...
基于vue+html5实现九宫格抽奖转盘原理及源码
先说下动态跑马灯九宫格抽奖转盘应用场景,基于很多活动页面都常用,积分抽奖兑换等.九宫格html+css排版样式这里就不多说了. 实现原理: 跑马灯:用2个Png背景图片做css3帧切换动画. 中奖数组 ...
【九宫格抽奖源代码】
目录 1.效果图 2.源码 2.1 html 2.2css 2.3js 1.效果图 2.源码 2.1 html <!doctype html> <html> <head ...
使用vue实现九宫格抽奖功能
使用vue2和vue3分别实现九宫格抽奖功能关于九宫格抽奖的功能,想必大家都见过.外圈为奖品,中间是一个抽奖的按钮,接下来就讲解怎么实现九宫格的抽奖功能. 本demo使用技术:vue2/vue3,作 ...
Vue实现3*3九宫格抽奖（并拓展实现n*n多宫格抽奖）
九宫格抽奖,包括幸运大转盘,已经在不管是电商还是日常网页中已经算是比较常见的页面效果了(此处点名批评pdd),那么如何用Vue来实现九宫格以及后续的十二宫格,十六宫格等多宫格抽奖组件呢? 先上效果图: ...
vue简单实现九宫格抽奖
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
html+抽奖游戏,九宫格抽奖HTML+JS版
div{ margin: 100px auto 0px; // 居中 width:500px; height:250px; border:3px solid black; // 边框 } li{ wi ...
【小程序与公众号】微信小程序九宫格抽奖（抽奖完全随机）
上图话不多说直接上图,抽奖是顺时针又快变慢(还原抽奖的动画)进行抽奖,抽奖的几率都是随机源码接下来展示的就是微信小程序中的九宫格抽奖说明适用范围抽奖逻辑只是原生JS,通过数据进行驱动,因此 ...
Vue3实现九宫格抽奖效果
前言好久没有写文章了,上一次发文还是年终总结,眨眼间又是一年,每每想多总结却是坚持不来,难顶. 这次分享一个九宫格抽奖小游戏,缘起是最近公司内部做积分抽奖需求,抽出其中抽奖动效做一个总结,从零实现 ...
九宫格抽奖转盘源码分析
效果如上图所示,下面对其实现代码进行分析,看能不能破解其抽奖规则.需要引入jquery-1.8.3.min.js和images/9张图片. <!DOCTYPE html PUBLIC ...

Vue 九宫格抽奖实现

1、页面搭建（创建index.vue）

2、相关CSS定位

3、相应JS逻辑（idnex.js）

Vue 九宫格抽奖实现相关推荐

最新文章

热门文章