vue大转盘抽奖,vue滚动抽奖
这篇文章主要为大家详细介绍了某视频剪辑软件实现宫格轮转抽奖，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
某视频剪辑软件实现宫格轮转抽奖（类似穿越火线的xx轮回),供大家参考，具体内容如下
不做过多的解说，直接上代码啦。关键的代码都写了注释，很容易理解。直接复制即可使用！
另外钢性铸铁部分依赖节点-sass、sass-loader、没有安装的安装一下，已有的小伙伴直接跳过~~
节点-萨斯:^4.12.0,
"萨斯-装载机":^8.0.2,
模板
div class=home
div class=home-container
div class=home-container-line
差异
家用集装箱线箱
v-for=列表。切片(0，5)中的项目
:key=item.index
:class="{ selected:item。活动} "
{{ item.label }}
/div
/div
div class=home-container-line
差异
家用集装箱线箱
v-for=列表。切片(11，12)中的项目
:key=item.index
:class="{ selected:item。活动} "
{{ item.label }}
/div
div class= home-container-line-BTN @ click= handle click :disable= is animate /div
差异
家用集装箱线箱
v-for=列表。切片(5，6)中的项目
:key=item.index
:class="{ selected:item。活动} "
{{ item.label }}
/div
/div
div class=home-container-line
差异
家用集装箱线箱
数组中的v-for=项。原型。反转。呼叫(列表。slice(6，11))
:key=item.index
:class="{ selected:item。活动} "
{{ item.label }}
/div
/div
/div
/div
/模板
脚本
导出默认值{
名字："幸运",
data() {
返回{
列表：[
{标签: 未中奖，val: 1，img: ，索引：0，active: false }，
{标签: 大保健，val: 2，img: ，索引：1，active: false }，
{ label: iPhone13 ，val: 3，img: ，index: 2，active: false }，
{ label: MacBook Pro ，val: 4，img: ，index: 3，active: false }，
{ label: MacBook Air ，val: 5，img: ，index: 4，active: false }，
{标签: 1积分，val: 6，img: ，索引：5，active: false }，
{标签: 5积分，val: 7，img: ，索引：6，active: false }，
{标签: 10积分，val: 8，img: ，索引：7，active: false }，
{标签: 小爱同学，val: 9，img: ，索引：8，active: false }，
{标签: 安慕希酸奶，val: 10，img: ，索引：9，active: false }，
{标签: 清空购物车，val: 11，img: ，索引：10，active: false }，
{标签: 50元话费，val: 12，img: ，索引：11，active: false }，
],
isAnimate: false，//为真实的时代表正在抽奖，当前抽奖未结束时点击抽奖按钮无效
跳转指数：数学。地板(数学。random()* 12)，//抽奖轮跳时的索引
跳转时间：0,//正在轮跳的时间
jumpingTotalTime: 0，//轮跳的时间总量，基于期间变量加上一个0~1000 之间的随机数组成
跳转更改：0,//轮跳速率峰值，基于速度变量加上一个0~3 之间的随机数组成
时长：4500,//持续时间
速度：300,//速率
};
},
方法：{
handleClick() {
if(this.isAnimate)返回；
这个。跳跃时间=0；
这个。跳到时间=数学。random()* 1000这个。持续时间；
这个。跳跃变化=数学。random()* 3这个。速度；
这个。动画圆(这个。跳跃指数)；
},
动画环绕（索引){
this.isAnimate=true
如果(这个。跳索引这个。列表。长度-1)这个。跳跃指数；
如果(这个。跳跃指数=这个。列表。长度-1)这个。跳转指数=0；
this.jumpingTime=100//每一帧执行定时器方法所消耗的时间
//如果当前时间大于时间总量后，退出动画，清算奖品
如果(这个。跳跃时间=这个。跳跃总时间){
this.isAnimate=false
if(index==0) {
警报(` 1很遗憾没有抽到奖品，再接再厉哦~`);
}
否则{
警报(` 1恭喜您抽到了：${this.list[index].标签} `)
}
返回
}
//轮训动画
if (index=this.list.length-1) {
索引=0;
这份名单. active=false
这个。列表[索引]。活动=真
index-=1；
}否则{
这个。列表[索引]。活动=假
这个。列表[索引1]。活动=真
}
setTimeout(()={
this.animateRound(索引1);
}，this.easeOut(this.jumpingTime，0，this.jumpingChange，this。跳到totime))；
},
/**
* 缓动函数，由快到慢
* @param {Num} t当前时间
* @param {Num} b初始值
* @param {Num} c变化值
* @param {Num} d持续时间
*/
easeOut(t，b，c，d) {
if ((t /=d/2) 1)返回(c/2)* t * t b；
return(-c/2)*(-t *(t-2)-1)b；
},
},
};
/脚本
样式lang=scss 范围。居中{
显示器：flex
对齐-内容：居中；
对齐-项目：居中；
}。主页{
填充：0;
边距：0;
宽度：100%;
高度：calc(100 VH-16px)；
背景图像：线性渐变(25度、#30007c、#464995、#4d83ad、# 41 bfc 4)；
@延伸。居中；
-容器
宽度：1000像素
高度：600像素
-行{
宽度：100%;
身高：198像素
显示器：flex
-盒子{
flex:1；
溢出：隐藏；
保证金：5px 3px 5px 3px
@延伸。居中；
背景：# fff
转场：全。3s；
}
-btn {
位置：相对；
flex:3；
溢出：隐藏；
保证金：5px 3px 3px 3px
@延伸。居中；
盒影：0 1px 10px 0px # cf 5531
背景图像：线性梯度（
25度，
#cf5531，
#d0853a，
#cdaf43，
#c4d84d
);
光标：指针；
：活动{
背景图像：线性梯度（
25度，
#3f3e41，
#6d6340，
#9a8b39，
#c9b629
);
}
*之前{
位置：绝对；
内容： 点击抽奖；
字体大小：2.5雷姆；
颜色：# fff
字体粗细：粗体；
}
}
}
}
}。已选择{
背景：rgba($color: #f6e58d，$ alpha:0.5)；
动画-名字：闪烁
动画——时长：3s；
动画-迭代-计数：无限；
}
@关键帧闪烁{
0% {背景：# ffbe76}
100% {背景：# f 6 e 58d}
}
/风格
效果图：
最后特别说明一下，概率完全是随机的。目前还没有特别好的思路去调整中奖的概率，如果有比较好的想法的小伙伴们也非常欢迎一起来探讨一下
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。