uniapp 九宫格抽奖

样式就自己写吧

实现思路：因为是九宫格，里面商品只会有九个，他们的index是固定的，然后根据后端返回的中奖商品id找出他的index，设置抽奖动画固定跑三遍然后加上你中奖id的index即可

代码：

// 点击后 true  获取奖品后 false  防止重复点击

rolling: false,
// 滚动选中的id
currentIdx: -1,
// 中奖id的key
 prizeId: null

 点击抽奖事件

// 点击抽奖事件drawChange() {if (this.rolling) returnthis.currentIdx = -1this.rolling = truevar id = 2// 根据key值所以加1this.prizeId = this.drawList.findIndex(item => item.id == id)if (this.prizeId < 0) {this.$Common.showToast('系统繁忙，请稍后重试')} else {this.prizeId += 1this.startAnimation()}},startAnimation() {let speed = 100; // 初始速度(ms)let step = 0;const totalSteps = 9 + this.prizeId; // 总滚动步数this.intervalId = setInterval(() => {if (step >= totalSteps) {clearInterval(this.intervalId);// 打开弹窗this.stopAtTarget();} else {this.currentIdx = (this.currentIdx + 1) % this.drawList.length;speed += 40; // 逐步增加间隔时间模拟减速step++;}}, speed);},