IT评测·应用市场-qidao123.com

标题: uniapp 九宫格抽奖 [打印本页]

---

作者: 小秦哥    时间: 2025-2-24 07:12
标题: uniapp 九宫格抽奖
抽奖
  样式就本身写吧
实现思绪：因为是九宫格，内里商品只会有九个，他们的index是固定的，然后根据后端返回的中奖商品id找出他的index，设置抽奖动画固定跑三遍然后加上你中奖id的index即可
代码：
   // 点击后 true  获取奖品后 false  防止重复点击
  rolling: false,
// 滚动选中的id
currentIdx: -1,
// 中奖id的key
 prizeId: null
   点击抽奖变乱

1. // 点击抽奖事件
2.                         drawChange() {
3.                                 if (this.rolling) return
4.                                 this.currentIdx = -1
5.                                 this.rolling = true
6.                                 var id = 2
7.                                 // 根据key值所以加1
8.                                 this.prizeId = this.drawList.findIndex(item => item.id == id)
9.                                 if (this.prizeId < 0) {
10.                                         this.$Common.showToast('系统繁忙，请稍后重试')
11.                                 } else {
12.                                         this.prizeId += 1
13.                                         this.startAnimation()
14.                                 }
15.                         },
16.                         startAnimation() {
17.                                 let speed = 100; // 初始速度(ms)
18.                                 let step = 0;
19.                                 const totalSteps = 9 + this.prizeId; // 总滚动步数
20.                                 this.intervalId = setInterval(() => {
21.                                         if (step >= totalSteps) {
22.                                                 clearInterval(this.intervalId);
23.                                                 // 打开弹窗
24.                                                 this.stopAtTarget();
25.                                         } else {
26.                                                 this.currentIdx = (this.currentIdx + 1) % this.drawList.length;
27.                                                 speed += 40; // 逐步增加间隔时间模拟减速
28.                                                 step++;
29.                                         }
30.                                 }, speed);
31.                         },

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)

Powered by Discuz! X3.4