vue组件实现移动端九宫格转盘抽奖


Posted in Javascript onOctober 16, 2020

本文实例为大家分享了vue组件实现移动端九宫格转盘抽奖的具体代码,供大家参考,具体内容如下

vue-lucky-draw

移动端九宫格转盘抽奖vue组件,中奖的奖品数据由接口决定。

效果图

vue组件实现移动端九宫格转盘抽奖

抽奖

因为中奖的结果是后台返回的,所以要考虑转盘的最终停下来的位置必须是在对应后台返回结果的奖品的位置,也就是要模拟出这个中奖的过程(所以所谓的抽奖都是骗人的,嘿嘿)。先要写出移动的背景框对应的各个位置的css,然后动态切换class来使其呈现出转动效果。明白了过程就好写了。

中间的按钮用的是css3的animation,我这个奖品是合在了一张图上,你也可以分开成8张小图,那样需要写更多的样式。

// 抽奖
 handleStart() {
 if (this.isRuningLucky) {
  return Toast("正在抽奖中...");
 }
 if (isNaN(Number(this.initSpeed))) {
  return false;
 }
 this.speed = this.initSpeed;
 // 开始抽奖
 this.isRuningLucky = true;
 this.time = Date.now();
 this.drawAward();
 Toast("开始抽奖");
 },
 drawAward() {
 // 请求接口,模拟一个抽奖数据(假设请求时间为2s)
 setTimeout(() => {
  this.award = {
  id: "4"
  };
  console.log("返回的抽奖结果是", this.award);
 }, 2000);
 this.move();
 },
 move() {
 let timer = setTimeout(() => {
  this.current++;
  if (this.current > 7) {
  this.current = 0;
  }
  // 若抽中的奖品id存在,则开始减速转动
  if (this.award.id && (Date.now() - this.time) / 1000 > 2) {
  console.log("奖品出来了");
  this.speed += this.diff; // 转动减速
  
  // 若转动时间超过4秒,并且奖品id等于小格子的奖品id,则停下来
  if (
   (Date.now() - this.time) / 1000 > 4 &&
   this.award.id == this.awards[this.current].id
  ) {
   clearTimeout(timer);

   setTimeout(() => {
   this.isRuningLucky = false;
   // 这里写停下来要执行的操作(弹出奖品框)
   Toast(
    "您抽中的奖品是" + this.awards[this.current].name + ",奖品id是" + this.awards[this.current].id
   );
   }, 400);
   return;
  }

  // 若抽中的奖品不存在,则加速转动
  } else {
  if (this.speed >= 50) {
   this.speed -= this.diff; // 转动加速
  }
  }

  this.move();
 }, this.speed);
 },

号码滚动

使用无序列表将号码列表(正常是从接口获取)循环出来,通过设置定时以及控制transition的属性,来达到无缝连接的效果。如果样式(li高度)改变的话,需要对定时器时间进行调节(控制下一个显示的时间)。

// 中奖名单滚动
 scroll() {
 this.animate = true;
 let timer = setTimeout(() => {
  this.list.push(this.list[0]);
  this.list.shift();
  this.animate = false;
 }, 500);
 }

功能代码请移步到我的GitHub
可以clone项目 npm i , npm run dev,喜欢的话点个星吧_~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
[原创]图片分页查看
Aug 28 Javascript
IE和Firefox下javascript的兼容写法小结
Dec 10 Javascript
善用事件代理,警惕闭包的性能陷阱。
Jan 20 Javascript
javascript创建createXmlHttpRequest对象示例代码
Feb 10 Javascript
分析了一下JQuery中的extend方法实现原理
Feb 27 Javascript
jQuery基于json与cookie实现购物车的方法
Apr 15 Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 Javascript
AngularJS 霸道的过滤器小结
Apr 26 Javascript
vue.js中过滤器的使用教程
Jun 08 Javascript
bootstrap fileinput实现文件上传功能
Aug 23 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
Nov 24 Javascript
vue内置组件transition简单原理图文详解(小结)
Jul 12 Javascript
Vue3.0的优化总结
Oct 16 #Javascript
JavaScript通如何过RGraph实现动态仪表盘
Oct 15 #Javascript
利用js实现简易红绿灯
Oct 15 #Javascript
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 #Javascript
JS如何操作DOM基于表格动态展示数据
Oct 15 #Javascript
Node 使用express-http-proxy 做api网关的实现
Oct 15 #Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 #Javascript
You might like
一个简单计数器的源代码
2006/10/09 PHP
CI框架AR操作(数组形式)实现插入多条sql数据的方法
2016/05/18 PHP
PHP串行化与反串行化实例分析
2016/12/27 PHP
php四种定界符详解
2017/02/16 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
thinkphp3.2.0 setInc方法 源码全面解析
2018/01/29 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
在Javascript中 声明时用"var"与不用"var"的区别
2013/04/15 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
2014/01/09 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
2015/10/23 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
简单的js计算器实现
2016/10/26 Javascript
AngularJS创建自定义指令的方法详解
2016/11/03 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
nodejs搭建本地服务器轻松解决跨域问题
2018/03/21 NodeJs
Vue中插入HTML代码的方法
2018/09/21 Javascript
4个顶级开源JavaScript图表库
2018/09/29 Javascript
详解React中合并单元格的正确写法
2019/01/08 Javascript
Vue中遍历数组的新方法实例详解
2019/07/21 Javascript
微信小程序自定义弹出层效果
2020/05/26 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
[01:03:13]VG vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
详解Python中find()方法的使用
2015/05/18 Python
谈谈Python进行验证码识别的一些想法
2016/01/25 Python
Python全局变量用法实例分析
2016/07/19 Python
Python用list或dict字段模式读取文件的方法
2017/01/10 Python
详解Django+Uwsgi+Nginx的生产环境部署
2018/06/25 Python
python使用PIL和matplotlib获取图片像素点并合并解析
2019/09/10 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
英国家庭和商业健身器材购物网站:Fitness Options
2018/07/05 全球购物
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
重温入党誓词主持词
2015/06/29 职场文书
Java基于字符界面的简易收银台
2021/06/26 Java/Android