DDR爱好者之家

vue组件实现移动端九宫格转盘抽奖
站长资源 2024/5/18 佚名
74 1538
DDR爱好者之家 Design By 杰米

本文实例为大家分享了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，喜欢的话点个星吧_~

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
DDR爱好者之家 Design By 杰米