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 相关文章推荐
用dtree实现树形菜单 dtree使用说明
Oct 17 Javascript
window.location不跳转的问题解决方法
Apr 17 Javascript
原生javascript模仿win8等待提示圆圈进度条
Apr 24 Javascript
javascript中拼接HTML字符串的最快、最好的方法
Jun 07 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
Oct 31 Javascript
AngularJS入门教程(一):静态模板
Dec 06 Javascript
jquery滚动加载数据的方法
Mar 09 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
Jun 14 Javascript
JS运动改变单物体透明度的方法分析
Jan 23 Javascript
clipboard.js在移动端复制失败的解决方法
Jun 13 Javascript
JavaScript函数定义方法实例详解
Mar 05 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
May 23 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
基于php 随机数的深入理解
2013/06/05 PHP
AJAX PHP无刷新form表单提交的简单实现(推荐)
2016/09/09 PHP
PHP进阶学习之命名空间基本用法分析
2019/06/18 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
学习使用jquery iScroll.js移动端滚动条插件
2020/03/24 Javascript
JavaScript实现图片滑动切换的代码示例分享
2016/03/06 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/25 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
2018/05/09 Javascript
使用 node.js 模仿 Apache 小部分功能
2019/07/07 Javascript
Vue代码整洁之去重方法整理
2019/08/06 Javascript
js实现漂亮的星空背景
2019/11/01 Javascript
jQuery实现简易聊天框
2020/02/08 jQuery
让IDE识别webpack的别名alias的实现方法
2020/05/06 Javascript
openlayers实现地图弹窗
2020/09/25 Javascript
详解Django框架中用context来解析模板的方法
2015/07/20 Python
利用selenium爬虫抓取数据的基础教程
2019/06/10 Python
详解pandas使用drop_duplicates去除DataFrame重复项参数
2019/08/01 Python
python TK库简单应用(实时显示子进程输出)
2019/10/29 Python
浅析Python 多行匹配模式
2020/07/24 Python
Pycharm 2020.1 版配置优化的详细教程
2020/08/07 Python
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
Stutterheim瑞典:瑞典高级外套时装品牌
2019/06/24 全球购物
毕业生求职推荐信
2013/11/04 职场文书
学前教育学生自荐信范文
2013/12/31 职场文书
化妆品促销方案
2014/02/24 职场文书
车间机修工岗位职责
2014/02/28 职场文书
大学毕业生个人自荐书
2014/07/02 职场文书
勿忘国耻9.18演讲稿(经典篇)
2014/09/14 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
2015年新农村建设指导员工作总结
2015/07/24 职场文书
请病假条范文
2015/08/17 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书
如何在CocosCreator里画个炫酷的雷达图
2021/04/16 Javascript
Python捕获、播放和保存摄像头视频并提高视频清晰度和对比度
2022/04/14 Python