vue抽奖程序,vue转盘抽奖插件
运营三宝(九宫格、大转盘、老虎机，当然这三宝是最基本的营销运营手段)。本文讲的是大转盘。转盘的实现逻辑应该是一个比较简单的营销方案。本文将介绍如何实现大转盘抽奖。感兴趣的朋友可以参考一下。
目录
UI初始参考各值参考图方案分析-参数配置核心思想：关于在旋转位置参数配置中利用逻辑元件的抽奖效应的结论
UI
照例先看静态UI以便有个形象概念。
初始参考各值参考图
方案分析-参数配置
核心思路：
将指针和获胜区域分成两部分。目前常规的效果是控制中奖区旋转，然后停在指针上。当然，也可以控制指针。一套思路，而且dom结构比较简单。唯一复杂的是中奖区域，但如果你足够懒，像我一样，可以传一张图也可以不传，完全靠远程数据；
关于旋转位置
每个移动的位置要平分，360/数===每个奖所占的位置。以这篇文章为例，八个奖位，每个区域应该是45度，每个指针的中心位置应该是22.5度(表示你是顺时针还是逆时针)。有关特定值，请参见以下实现逻辑区域。
参数配置
数据给组件一些系统参数，比如旋转次数，效果等等。
计算属性rotateStyle的旋转角度并实时调整。
Props提供了组件内部接口的参数和一些核心数据，比如转盘的图片等等。
//基本参数
data () {
返回{
isrun:假的，
RotateAngle: 0，//旋转角度
配置：{
时长：4000，//总旋转时间为ms级
圆：8，//转数
模式：‘易进易出’//从快到慢惯性，效果保存。
},
Crileadd: 1，//多少次抽奖？
DrawIndex: 0 //中奖指数转盘图片排序指针从右手0-开始.
}
}
//计算属性
计算值：{
rotateStyle () {
常量_c=this.config
返回
-WebKit-transition:transform $ { _ c . duration } ms $ { _ c . mode }；
transition:transform $ { _ c . duration } ms $ { _ c . mode }；
-WebKit-transform:rotate($ { this . rotate angle } deg)；
transform:rotate($ { this . rotate angle } deg)；`
}
}
//参与
道具：{
HttpData: {}，///接口调用所需的参数
状态数据：{
类型：对象，
默认值：()={
返回{
币：0，//超级币数量
Prize_img: //转盘图片
}
}
}
}
实现逻辑
我们要做的很简单。我们可以计算出中奖的位置并输出。
即位置对应圈数，drawIndex对应奖品位置，如该参数所述。
this . rotate angle=this . config . circle * 360 * this . CRIC leadd-(22.5 this . draw index * 45)
//循环位置分辨率
//this . config . circle * 360 * this . CRIC顺时针旋转总圈数/累计总圈数
//22.5 this.drawIndex * 45===(奖品位置===this.drawIndex * 45)(指针中间位置===22.5)
DrawIndex，直接从服务器上拿就行了。如果没有跑出位置，可以自己算。
为了扩展方便，抛出两种状态，分别对应于开始抽签和完成，start和fin。
这个。$emit(draw_fin ， start )
这个。$emit(draw_fin ， fin )
完整代码，css不用字，下面附上源码地址。
方法：{
异步运行(){
if (this.stateData.coin 10) {
Console.log(超级货币不足)
返回
}
if (this.isrun)返回
//const data=await this.goDraw()
//可以显示为弹窗等信息。
这个。$emit(draw_fin ， start )
这个。$ set (this.statedata， coin ，0)//更新数据。这只是一个例子。建议使用draw_fin方法的start/fin更新相应的数据。
this.isrun=true
this . rotate angle=this . config . circle * 360 * this . CRIC leadd-(22.5 this . draw index * 45)
//循环位置分辨率
//this . config . circle * 360 * this . CRIC顺时针旋转总圈数/累计总圈数
//22.5 this.drawIndex * 45===(奖品位置===this.drawIndex * 45)(指针中间位置===22.5)
this . CRIC lead
setTimeout(()={
这个。$emit(draw_fin ， fin )
this.isrun=false
}，this.config.duration)
},
goDraw () {
//请求接口获取中奖商品
//添加自己项目加载用户体验的风格
返回新承诺(异步(解决，拒绝)={
//等待奖品接口
解决({
消息：“抽奖详情”
})
})
}
组件使用
使用
从导入dialWrap././components/dial/dial.vue
dial wrap ref= dial wrap :stateData= stateData /dial wrap
抽奖效果
结语
以上是大致的实现思路，效果比较简单；精细的东西和拓展，可以自己玩~
附上本文——源码地址，欢迎讨论~
以上是vue的大转盘抽奖详情。有关VUE大转盘彩票的更多信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。