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 相关文章推荐
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
Feb 09 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
Nov 07 Javascript
js 采用delete实现继承示例代码
May 20 Javascript
基于jquery实现人物头像跟随鼠标转动
Aug 23 Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 Javascript
JS作为值的函数用法示例
Jun 20 Javascript
关于webuploader插件使用过程遇到的小问题
Nov 07 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
Aug 17 Javascript
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
浅谈Vue.js中ref ($refs)用法举例总结
Dec 19 Javascript
利用jqprint插件打印页面内容的实现方法
Jan 09 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
Jun 18 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加速的eAccelerator dll支持文件打包下载
2007/09/30 PHP
PHP is_subclass_of函数的一个BUG和解决方法
2014/06/01 PHP
php图片的二进制转换实现方法
2014/12/15 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
php表单处理操作
2017/11/16 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
jquery DIV撑大让滚动条滚到最底部代码
2013/06/06 Javascript
jquery二级导航内容均分的原理及实现
2013/08/13 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
详解react-native-fs插件的使用以及遇到的坑
2017/09/12 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
基于ts的动态接口数据配置的详解
2019/12/18 Javascript
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
[02:27]2018DOTA2亚洲邀请赛趣味视频之钓鱼大赛 谁是垂钓冠军?
2018/04/05 DOTA
[01:07:19]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第一场 1月19日
2021/03/11 DOTA
自动化Nginx服务器的反向代理的配置方法
2015/06/28 Python
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
用Q-learning算法实现自动走迷宫机器人的方法示例
2019/06/03 Python
基于python-opencv3的图像显示和保存操作
2019/06/27 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
哈工大自然语言处理工具箱之ltp在windows10下的安装使用教程
2020/05/07 Python
Python enumerate() 函数如何实现索引功能
2020/06/29 Python
Django rest framework分页接口实现原理解析
2020/08/21 Python
python从PDF中提取数据的示例
2020/10/30 Python
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
惠普美国官方商店:HP Official Store
2016/08/28 全球购物
美丽的现代设计家具:2Modern
2018/07/26 全球购物
早餐连锁店计划书
2014/01/08 职场文书
爷爷追悼会答谢词
2014/01/24 职场文书
采购助理岗位职责
2014/02/16 职场文书
大学生求职计划书
2014/04/30 职场文书
国际商贸专业自荐信
2014/06/09 职场文书
新教师教学工作总结
2015/08/14 职场文书