使用vue怎么实现一个转盘抽奖功能 -凯发真人娱乐

本篇文章为大家展示了使用怎么实现一个转盘抽奖功能，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

vue的优点

vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟dom、运行速度快等优势，vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

1.0 思路整理

转盘抽奖很常见，之前也没写过，现在有空来写写，分析如下：

1.1 转盘旋转 ----- 可以用 transform 的 rotate 来解决
1.2 旋转动画 ----- transition 过渡来处理
1.3 停留目标位置及中奖提示 ？ ------ 通过控制旋转角度控制停留位置，中奖提示，考虑添加回调

1.1 开始行动

上面的思考，我们知道了大概要实现的步骤，首先我们搞张图片

这个圆盘有 10 份，每一份 360/10 = 36deg，假设要停留在第二个---->20金币，顺时针（含初始位置并计为1），即 共需要旋转 (2 - 1)* 36 = 36，这样，我们可以得出，停留位置需要旋转的角度 = (target - 1)*36。

1.2 中奖回调

上面的步骤，我们知道了如何控制到目标位置，那接下来就是事件通知，起初想的是，固定转动时间，然后开启定时器计时，很显然不靠谱，有没有什么可以在动画结束后就通知呢？transitionend，我找到了这个事件，可以监听元素动画结束事件，只不过有些兼容 这个好办

/**
动画结束事件兼容
**/
whichtransitionevent(){
 let el = document.createelement('span'),
 transitions = {
 'transition':'transitionend',
 'otransition':'otransitionend',
 'moztransition':'transitionend',
 'webkittransition':'webkittransitionend'
 };
 for(let t in transitions){
 if( el.style[t] !== undefined ){
  return transitions[t];
 }
 }
 el = null;
}

2.0 完整示例

控制转动位置和事件通知都找到方法了，接下来开干！

栗子：

完整代码

.img_rotate{
 transform: rotate(0deg);
}
.round_box{
 width: 100%;
 max-width: 375px;
 position: relative;
 overflow: hidden;
 img{
 width: 100%;
 }
 .center{
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 .pointer{
  width: 5px;
  height: 90px;
  background-color: #f40;
  position: absolute;
  top: -90px;
 }
 .pointer::before{
  content:'';
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #f40;
  border-left: 15px solid transparent;
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translatex(-50%);
 }
 }
}

3.0 tips

总体来说有几个点需要注意

1、动画开始前上锁

2、动画结束后通知，状态复位

/**
比如：
基数3圈 reset 360*3
停留位置 第二个 （2 - 1）* 36 = 36
总共角度 360*3   36
动画停止后，因为还要继续旋转，所以不可能把角度一直增加，因此需要复位 
360*3   36 其实可以考虑 就转了 36度，然后再增加需要转的角度
**/

上述内容就是使用vue怎么实现一个转盘抽奖功能，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注本站行业资讯频道。