基于VUE实现的九宫格抽奖功能

先给大家展示下效果图：

超文本标记语言代码：

模板div class=' luckDraw '标题栏： title=' title '/标题栏div class=' container ' div class='转盘-包装器运气-包装器p类='积分'我的积分： span 1000/span/p ul class='九格' Li class=' row ' div v-for='(n，key)in 3 ' : key=' n ' : class=' index===key？" active " : ` ` " div class=" wrapper " img src=" http :/./资产/运气-图标。png ' alt=' P8 '金转/p/div div class=' mask '/div/div/Li Li class=' row ' div : class=' index===7 '？active ' : ' ' ' div class=' wrapper ' img src=' http :/./资产/运气-图标。png ' alt=' ' p128金转/p/div div class=' mask '/div/div class=' getLuck ' @ click=' start '彩票p立即英国铁路公司抽奖/p /div div :class='index===3？active ' : ' ' ' div class=' wrapper ' img src=' http :/./资产/运气-图标。png ' alt=' ' p128金转/p/div div class=' mask '/div/div/Li Li class=' row ' div v-for='(n，key)in 3 ' : key=' n ' : class=' index===6-key？" active " : ` ` " div class=" wrapper " img src=" http :/./资产/运气-图标。png ' alt=' p256金转/p/div class=' mask '/div/div/Li/ul/div p class=' share '分享领积分I class=' icon-go '/I/p div class=' rule ' p class=' rule-title '活动规则/p ul class='rule-main' li1，活动时间：2017年9月8日起；/li li2、活动期间，股事汇用户每次抽奖消耗20积分，抽奖次数不限/li li、金钻可用于向投顾提问、送礼、赞赏；/li li4、积分赚取：每日签到、分享文章/问答/直播间、点赞、金钻充值均可获得积分哦/li li5、活动最终解释权归股事汇所有/Li/ul/div/div/div/luck toast : show toast=' show toast ' : toast type=' toast type ' @ closeoast=' closeoast ' @ start彩票=' start彩票/luck toast/div/div/templatescs样式：

@ import ' ~ base .luckDraw { .转盘包装器{ padd : 0 px3 rem(38)；相对位置：@ include background-cover(' background-luck。png ')；padding-top : px3 rem(121)；幸运包装纸{ width : px3 rem(300)；高度： px3rem(377)；margin: 0自动相对位置：@包含背景-封面('背景-转盘。png ')；整体{宽度： 100%;color : # 6d2d 00 font-size : px3 rem(16)；字体粗细：正常；文本对齐：中心；绝对位置：top : px3rem(58)；span { font-weight : 600；color: # ff2f4d} }。九格网{位置：绝对值；top : px3rem(86)；左侧： 50%;左边距-: px3 rem(-130)；宽度： px3 rem(260)；身高： px3雷姆(260)；李{身高： px3雷姆(80)；display : flex margin-top : px3 rem(5)；div { flex : 1；右边距： px3 rem(5)；高度： 100%;文本对齐：中心；相对位置：包装材料{宽度： 100%;高度： 100%;保证金： 0；@包含背景-封面('背景-网格。png ')；} img { width : px3 rem(46)；身高： px3雷姆(38)；垂直对齐： 中间；页边距-顶部： px3 rem(8)；} .掩模{位置：绝对值；top : 0；左： 0；宽度： 100%;高度： 100%;opacity:边界半径： px3 rem(10)；背景色： # 000;显示器：无；} } div.active { .屏蔽{显示：块；} } div:first第一个孩子{左边距-: px3 rem(5)；} div。GetLack { @ include background-cover(' background-GetLack。png ')；font-size : 0；p { font-size : px3 rem(20)；字体粗细： 600；color: # fff线高： 1.1;页边距-顶部： px3 rem(11)；} } }李：末子{页边距-底部： px3 rem(5)；} } } .共享{ width : px3 rem(160)；身高： px3雷姆(42)；margin: 0自动文本对齐：中心；线高： px3 rem(42)；@ include background-cover(' luckshrae。png ')；页边距-顶部： px3 rem(22)；color : # 6d2d 00 font-size : px3 rem(16)；字体粗细： 600；icon-go { @ include size(30)；@包含背景-封面(' Goshare-icon。png ')；显示器：内联块；垂直对齐： 中间；边距-底部： px3 rem(2)；} } .规则{ margin-top : px3 rem(14)；color : # ffffont-size : px3 rem(14)；填充-底部： px3 rem(39)；规则-标题{ text-align :居中；相对位置：font-size : px3 rem(16)；边距-底部： px3 rem(14)；} .规则标题：之前，{内容： }之后的规则标题：绝对位置：前：名52%；背景# fff宽度： 30%;高度： px3 rem(1)；} .{左侧： 0 }之前的规则标题：} .{右： 0 }之后的规则标题：} } }}JS代码：

//从“utils”导入实用工具从"组件/TitleBar.vue "导入luckToast从"组件/luckToast.vue "导出默认值{ name: 'luckDraw '，components: { TitleBar，LuckToast，}，data () { return { title: '积分转盘，index: -1，//当前转动到哪个位置，起点位置count: 8，//总共有多少个位置定时器： 0,//每次转动定时器speed: 200，//初始转动速度times: 0，//转动次数cycle: 50，//转动基本次数：即至少需要转动多少次再进入抽奖环节prize: -1，//中奖位置单击： true，showToast: false，toastType: 'luck '，} }，props: { }，methods: { //开始抽奖开始彩票(){ if(！这个。点击){返回}这个。收尾()这个。速度=200这个。click=false this。startroll()}，//开始转动startRoll () { this.times=1 //转动次数this.oneRoll() //转动过程调用的每一次转动方法，这里是第一次调用初始化//如果当前转动次数达到要求目前转到的位置是中奖位置如果(这个。乘以这个。这是第十个周期。价格===这个。index){ cleartime out(这。计时器)//清除转动定时器，停止转动这个。价格=-1这个。乘以=0。click=true this。showtoast=这是真的。toast type=' comeOn '控制台。日志('你已经中奖了)} else { if (this。乘以this.cycle) { this.speed -=10 //加快转动速度} else if(这个。times===这个。循环){//随机获得一个中奖位置const index=ParSeint(数学。random()* 10，0)| | 0这个。价格=指数if(this。价格7){这个。价格=7 }控制台。日志(` 0中奖位置$ {这个。price } `)} else if(这个。乘以这个。循环10 ((这。价格===0这个。index====7)| |这个。价格===这个。索引1)){这。速度=110 }否则{这。速度=20 } if(这。速度40){这个。速度=40 }这个。timer=setTimeout(这个。startroll，this.speed) }，//每一次转动oneRoll(){ 0让index=this.index //当前转动到哪个位置const count=this.count //总共有多少个位置索引=1如果(索引计数-1){ index=0 }这。index=index }，//关闭弹出框closeast(){ this。showtoast=false }，}，beforeMount () { }，created () { }，beforeDestroy () { }，}总结

以上所述是小编给大家介绍的基于VUE实现的九宫格抽奖功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！