这篇文章主要为大家详细介绍了微信小程序实现九宫格抽奖，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现九宫格抽奖的具体代码，适用于年会抽奖，供大家参考，具体内容如下
效果图比较卡顿，真实运行效果是旋转的
用到的素材：
实现步骤：
实现原理
改变每一项的透明度实现选中效果。利用setTimeOut时间使旋转速度越来越慢。达到慢慢停止的效果。实际应用中可以将9张奖品图片和中奖项均通过接口返回。以方便奖品的调整。
1.布局绘制
停止位置:
2.数据准备
//计数器 var interval = null; //值越大旋转时间越长 即旋转速度 var intime = 50; data: { color: [0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5], //9张奖品图片 images: ['/images/item.png-600', '/images/item1.png-600', '/images/item.png-600', '/images/item1.png-600', '/images/item.png-600', '/images/item1.png-600', '/images/item.png-600', '/images/item1.png-600', '/images/item.png-600'], //确定按钮 btnconfirm: '/images/dianjichoujiang.png-600', //点击事件 clickLuck:'clickLuck', //中奖位置 luckPosition:0, }, 3.显示界面时慢慢转动
//进入页面时缓慢切换 loadAnimation:function (){ var e = this; //初始位置为0 var index = 0; //每1秒钟切换一次位置 interval = setInterval(function () { if (index > 7) { index = 0; e.data.color[7] = 0.5 } else if (index != 0) { e.data.color[index - 1] = 0.5 } e.data.color[index] = 1 e.setData({ color: e.data.color, }) index++; }, 1000); }4.停止旋转
//which为中奖位置 需要停止时调用该方法 stop: function (which){ var e = this; //清空计数器 clearInterval(interval); //初始化当前位置 var current = -1; var color = e.data.color; for (var i = 0; i 7) { index = 0; color[7] = 0.5 } else if (index != 0) { color[index - 1] = 0.5 } //当前位置为选中状态 color[index] = 1 e.setData({ color: color, }) //如果旋转时间过短或者当前位置不等于中奖位置则递归执行 //直到旋转至中奖位置 if (time <400 || index !=which){> 5.可以点击按钮后停止抽奖 或者点击开始抽奖停止一段时候后自动停止
//模拟网络请求时间 设为两秒 var stoptime = 2000; setTimeout(function () { e.stop(e.data.luckPosition); }, stoptime) gitub地址：微信小程序九宫格抽奖
以上就是微信小程序实现九宫格抽奖的详细内容，更多请关注0133技术站其它相关文章！
