vue抽奖大转盘,vue抽奖程序
本文主要详细介绍vue对转盘抽奖的简单实现。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享vue简单实现转盘抽奖的具体代码，供大家参考。具体内容如下
1.0 思路整理
彩票很常见，我以前没写过。现在我有时间写了。分析如下：
1.1转盘旋转-可以通过旋转变换来解决。
1.2旋转动画-过渡过渡处理
1.3停留在目标位置和获胜提示？-通过控制旋转角度来控制停止位置，并提示中奖。请考虑添加回拨。
1.1 开始行动
从上面的思考，我们知道了要实现的步骤。首先，我们来做一张图。
这张盘有10份，每份都是360/10=36deg。如果想停留在第二个-20金币，顺时针方向(包括初始位置，计为1)，需要旋转 (2 - 1)* 36 = 36。这样就可以得到停留位置需要旋转的角度 = (target - 1)*36。。
1.2 中奖回调
以上步骤，我们知道如何控制到目标位置，那么下一步就是事件通知了。一开始我们想到的是固定自转时间，然后启动定时器，这显然不靠谱。动画结束后有什么可以通知的吗？Transitionend，我发现了这个事件，可以监听元素动画的end事件，但是很容易处理一些与这个事件的兼容性。
/**
动画结束事件兼容性
**/
whichTransitionEvent(){
设El=document . createelement( span )，
过渡={
“过渡”:“过渡结束”，
OTransition:oTransitionEnd ，
“moz transition”:“transitionend”，
“WebkitTransition”:“webkitTransitionEnd”
};
for(让t在过渡中){
if( el.style[t]！==未定义){
返回转换[t]；
}
}
el=null
}
2.0 完整示例
我们找到了控制旋转位置和通知事件的方法。开始吧！
栗子：
完全码
模板
差异
H3转盘彩票/h3
div class=round_box
img class= img _ rotate ref= rotImg src=./assets/zhuan.png alt=
div class=中心
div class=pointer /div
/div
/div
Button @click=toDraw 点击彩票/按钮
/div
/模板
脚本
导出默认值{
名称：“rotaryDraw”，
data() {
返回{
旋转：0，
重置：0，
hitId: 1，//1-10
drawStatus: false
}
},
异步装载(){
等待这个。$ next tick()；
let event transition=this . which transitionevent()；
让img=这个。$ refs.rotImg
让那个=这个；
Const hitAre=[30M流量包， 20金币， 20M流量包， 10M流量包， 5金币，
感谢您的参与， 10金币， 50M流量包， 2金币， 100M流量包
];
//监控动画结束
img . addevent listener(event transition，tranHand，false)；
函数tranHand() {
//重置
that.resetRotate=that .旋转360？that . rotate % 360:0；
img . style . transition= none 0s ease 0s ；
img . style . transform=` rotate($ { that . reset rotate } deg)`；
Alert(`抽奖结果[$ { hitAre[that . hitid-1]}]`)；
that.drawStatus=false
}
},
方法：{
start() {
这个。$ refs . rot img . style . transition= all 3s ease 0s ；
这个。$ refs . rotimg . style . transform=` rotate($ { this . rotate } deg)`；
},
toDraw() {
if(this.drawStatus){
Console.log(中彩票)；
返回
}
//标记状态
this.drawStatus=true
/**
*总共10个光盘，每个36度，停车位置(id)度(id-1)*36
*底座3圈360*4
* this .旋转当前角度
* **/
设reset=360 * 4；
设idx=this.getRandomInt(1，11)；
//设置点击
this.hitId=idx
//需要转更多的角度
让addRotate=this.resetRotate 0？360-this . reset rotate:0；
//总角度
设all rotate=this . rotate(idx-1)* 36 reset add rotate；
//角度限制
this . rotate=this . set rotate(all rotate)；
this.start()
},
//递归计算角度不超过360*6
setRotate(deg) {
设rest=deg-360；
回程休息360*6？this . set rotate(rest):deg；
},
getRandomInt(最小值，最大值){
//向上
min=math . ceil(min)；
//向下收集
max=数学。地板(最大)；
回归数学。地板(数学。random()*(max-min))min；//不含最大值，含最小值
},
//动画兼容
whichTransitionEvent(){
设El=文档。createelement(“span”)，
过渡={
"过渡":"过渡结束",
OTransition:oTransitionEnd ，
《墨子过渡》:“过渡结束”，
" WebkitTransition ":" webkitTransitionEnd "
};
对于(让t在过渡中){
if( el.style[t]！==未定义){
返回转换[t]；
}
}
el=空
}
}
}
/脚本
样式lang=scss 。img_rotate{
变换：旋转(0度);
}。圆形框{
宽度：100%;
最大宽度：375像素
位置：相对；
溢出：隐藏；
img{
宽度：100%;
}。居中{
位置：绝对；
top:50%；
左：50%;
transform: translate(-50%，-50%)；指针{
宽度：5px
高度：90px
背景色：# f40
位置：绝对；
top:-90px；
}。指针：在{
内容："";
宽度：0;
高度：0;
边框顶部：15px纯色透明；
右边框：15px纯色透明；
边框-底部：15px实心# f40
边框-左侧：15px纯色透明；
位置：绝对；
top:-20px；
左：50%;
transform:平移x(-50%)；
}
}
}
/风格
3.0 tips
总体来说有几个点需要注意
1、动画开始前上锁
2、动画结束后通知，状态复位
/**
比如：
基数3圈重置360*3
停留位置第二个(2 - 1)* 36=36
总共角度360*3 36
动画停止后，因为还要继续旋转，所以不可能把角度一直增加，因此需要复位
360*3 36 其实可以考虑就转了36度，然后再增加需要转的角度
**/
3、继续旋转，因为我们计算是以30米流量为初始值的，所以在此旋转仍然需要以30米为起点，此时假设现在停留位置是300度，也就是说再转60度，也就回到了初始位置，本人也是按照这个思路进行复位的。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。