这篇文章主要为大家详细介绍了微信小程序实现走马灯式抽奖，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现走马灯式抽奖的具体代码，供大家参考，具体内容如下
先来看下效果
设置奖项
awardList是从后台拿到的奖项数组，list不够八位时填充谢谢参与奖项，超过八位时截取数组，然后随机打乱数组，保证奖项随机布局，第四位固定填充立即抽奖按钮
// 设置奖项 settingAward(awardList) { const len = awardList.length; const award = { awardName: '谢谢参与', awardMoney: 0, awardType: '00', awardCode: '' }; let _awardList = []; if (len <8) { for (let i = 0; i <8 - len; i++) { awardlist.push(json.parse(json.stringify(award))); } this.randarr(awardlist); _awardlist=awardList; console.log(_awardlist) else if (awardlist.length== 8) awardlist; awardlist.splice(0, 9); _awardlist.splice(4, 0, awardname: '立即抽奖' }) return _awardlist; },>布局
主要用了flex布局，遍历奖品list，index==4时渲染立即抽奖按钮，否则渲染奖项
{{item.awardName}} {{item.awardName}} {{item.awardName}} {{item.awardName}} {{util.formatMoney(item.awardMoney)}} {{item.awardName}}
抽奖逻辑
开始抽奖时默认选中第一个，初始化idArr为currentIndex的索引，即下一个奖项在哪激活
记录圈数let cycles = 0;
开始设置interval = setInterval(frame, 100);index == 8时轮询了一圈，cycles加一
当cycles > 2时减速定时器interval = setInterval(frame, 300);
当抽奖接口有结果且转了三圈后跳到获奖位置，清除定时器并弹出获奖结果弹窗
// 开始抽奖 startLuck() { const idArr = [0, 1, 2, 5, 8, 7, 6, 3]; let cycles = 0; let that = this; let _awardList = this.data.awardList; let index = this.data.currentIndex; let activityCount = this.data.activityCount - 1; var interval = setInterval(frame, 100); this.setData({ lucking: true, activityCount }) let pending = true; post('122201.app', { duration: 2000, activityCode: this.data.activityCode }, { isMarket: true }).then(res => { pending = false; this.setData({ awardResult: { awardCode: "", ...res } }) }).catch(err => { clearInterval(interval); pending = false; activityCount += 1; this.setData({ activityCount, lucking: false, }) }) function frame() { if (!pending) { // 转三圈后跳到获奖位置 if (cycles > 3) { if (_awardList[that.data.currentIndex].awardCode == that.data.awardResult.awardCode) { clearInterval(interval); that.setData({ lucking: false, showModal: true }) return; } } } if (index == 8) { index = 0; if (!pending) { // 两圈后转盘减速 if (cycles++ > 1) { clearInterval(interval); interval = setInterval(frame, 300); } } } // 设置奖项跳到对应位置 that.setData({ currentIndex: idArr[index++] }) } },wxss
.turntable .content { width: 568rpx; height: 568rpx; background: #F48002; border-radius: 20px; position: absolute; top: 90rpx; left: 30rpx; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; padding: 10rpx; box-sizing: border-box; } .turntable .content .award { width: 174rpx; height: 174rpx; background: #FFFFFF; border-radius: 20rpx; display: flex; flex-direction: column; justify-content: center; align-items: center; }以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持0133技术站。
以上就是微信小程序实现走马灯式抽奖的详细内容，更多请关注0133技术站其它相关文章！
