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 相关文章推荐
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
Mar 05 Javascript
js自定义事件及事件交互原理概述(一)
Feb 01 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
Aug 23 Javascript
JavaScript中的对象的extensible属性介绍
Dec 30 Javascript
javascript计时器编写过程与实现方法
Feb 29 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Jun 02 Javascript
JQuery DIV 动态隐藏和显示的方法
Jun 23 Javascript
详解vue.js移动端导航navigationbar的封装
Jul 05 Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 Javascript
每个 JavaScript 工程师都应懂的33个概念
Oct 22 Javascript
JS操作字符串转数字的常见方法示例
Oct 29 Javascript
TypeScript之调用栈的实现
Dec 31 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的安全
2006/10/09 PHP
一个可以找出源代码中所有中文的工具
2006/10/25 PHP
用PHP连接MySQL代码的参数说明
2008/06/07 PHP
PHP7.0版本备注
2015/07/23 PHP
深入浅析php json 格式控制
2015/12/24 PHP
ThinkPHP实现分页功能
2017/04/28 PHP
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
javascript怎么禁用浏览器后退按钮
2014/03/27 Javascript
jQuery淡入淡出元素让其效果更为生动
2014/09/01 Javascript
jquery选择器需要注意的问题
2014/11/26 Javascript
Angularjs全局变量被作用域监听的正确姿势
2016/02/06 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
js图片切换具体实现代码
2016/10/13 Javascript
Vue组件之全局组件与局部组件的使用详解
2017/10/09 Javascript
vue双向数据绑定知识点总结
2018/04/18 Javascript
浅谈JS的原型和继承
2019/05/08 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
2019/09/25 Javascript
vue请求服务器数据后绑定不上的解决方法
2019/10/30 Javascript
python实现迭代法求方程组的根过程解析
2019/11/25 Javascript
python 查找文件夹下所有文件 实现代码
2009/07/01 Python
python的三目运算符和not in运算符使用示例
2014/03/03 Python
Python3下错误AttributeError: ‘dict’ object has no attribute’iteritems‘的分析与解决
2017/07/06 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
PyTorch加载预训练模型实例(pretrained)
2020/01/17 Python
关于tf.TFRecordReader()函数的用法解析
2020/02/17 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
手把手教你将Flask应用封装成Docker服务的实现
2020/08/19 Python
HTML实现代码雨源码及效果示例
2020/02/25 HTML / CSS
阿迪达斯荷兰官方网站:adidas荷兰
2018/03/16 全球购物
统计员岗位职责
2013/11/14 职场文书
报关员个人职业生涯规划书
2014/03/12 职场文书
幼儿园新年寄语
2014/04/03 职场文书
学生会竞选演讲稿
2014/04/24 职场文书
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python
MySQL 服务和数据库管理
2021/11/11 MySQL
MySQL约束(创建表时的各种条件说明)
2022/06/21 MySQL