九宫格抽奖需用v-for渲染响应式grid数组，每个格子含id、text、active、win属性；点击后调用接口获取中奖id，用setInterval循环高亮并减速停在winId处，配合防抖、禁用和视觉反馈确保体验。
uni-app里用v-for渲染九宫格抽奖界面
九宫格本质是 3×3 的二维布局，用 v-for 渲染最直接。关键不是“怎么画格子”，而是每个格子要能区分状态（未抽中 / 正在高亮 / 抽中），且支持点击触发逻辑。
常见错误是把所有格子写死成静态数组，导致后续无法动态控制高亮或禁用。应该用响应式数据驱动：
data() {
return {
grid: Array.from({ length: 9 }, (_, i) => ({
id: i,
text: ['一等奖', '二等奖', '三等奖', '谢谢参与'][i % 4],
active: false,
win: false
}))
}
}
注意：id 必须唯一且连续（0–8），后续动画和中奖判断都依赖它；active 控制当前高亮项，win 标记最终中奖格子。
点击「开始抽奖」后用setInterval模拟轮播高亮
抽奖视觉效果 = 每隔固定时间切换一个格子的 active 状态。不能用 setTimeout 递归调用，容易失控；必须用 setInterval + 手动清除，否则多次点击会叠加定时器。
- 启动前先清掉已有定时器：
this.timer && clearInterval(this.timer) - 每次高亮前检查是否已中奖，避免覆盖
win: true的格子 - 高亮索引用取模运算循环：
(currentIndex + 1) % 9，比手写 if 判断更稳 - 初始速度可设快（100ms），最后几轮减速（300ms），增强悬念感
示例节选：
this.timer = setInterval(() => {
const next = (this.currentIdx + 1) % 9;
this.grid.forEach((item, i) => {
item.active = (i === next) && !item.win;
});
this.currentIdx = next;
}, this.speed);
如何确定中奖格子并停止轮播
中奖逻辑不能在前端“真随机”决定——那等于把结果暴露给用户。正确做法是：点击后立刻向后端请求中奖结果，拿到具体 winId（比如 2 或 7），再用它控制结束时机。
常见坑：
- 没等接口返回就硬设中奖，导致前后端不一致
- 中奖格子高亮后没及时停掉
setInterval，造成闪烁或错位 - 中奖格子被设为
win: true后，仍允许再次点击「开始」，应加disabled或状态锁
建议结构：
async startDraw() {
if (this.isDrawing) return;
this.isDrawing = true;
try {
const res = await this.$http.post('/api/draw');
this.winId = res.data.id; // 后端返回 0~8 中的一个
this.triggerStopAnimation();
} catch (e) {
uni.showToast({ title: '抽奖失败', icon: 'none' });
this.isDrawing = false;
}
}
移动端点击区域小、误触多，必须加防抖和视觉反馈
九宫格按钮默认尺寸在手机上容易点歪，尤其边缘格子。不处理的话，用户猛点两下可能触发两次抽奖请求。
- 按钮绑定
@click="startDraw"前，务必加防抖（推荐用lodash.debounce或简单时间戳判断） - 点击瞬间置灰按钮或加 loading 动画，避免用户以为没点上而重复操作
- 九宫格容器用
display: grid; grid-template-columns: repeat(3, 1fr)，别用 flex 布局，否则在某些 Android 微信 WebView 下列宽不均 - 每个格子加
cursor: pointer（H5端）和user-select: none防止长按选中文本
真正麻烦的不是逻辑，是用户点下去那一刻——你得让他确信“系统收到了”，而不是盯着屏幕猜有没有生效。
