uniapp 九宫格抽奖
抽奖样式就本身写吧
实现思绪：因为是九宫格，内里商品只会有九个，他们的index是固定的，然后根据后端返回的中奖商品id找出他的index，设置抽奖动画固定跑三遍然后加上你中奖id的index即可
代码：
// 点击后 true 获取奖品后 false 防止重复点击
rolling: false,
// 滚动选中的id
currentIdx: -1,
// 中奖id的key
prizeId: null
点击抽奖变乱
// 点击抽奖事件
drawChange() {
if (this.rolling) return
this.currentIdx = -1
this.rolling = true
var id = 2
// 根据key值所以加1
this.prizeId = this.drawList.findIndex(item => item.id == id)
if (this.prizeId < 0) {
this.$Common.showToast('系统繁忙，请稍后重试')
} else {
this.prizeId += 1
this.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);
},
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]