微信小程序实现走马灯式抽奖
本文实例为大家分享了微信小程序实现走马灯式抽奖的具体代码，供大家参考，具体内容如下
先来看下效果
设置奖项
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;
else {
_awardList = awardList.splice(0, 9);
}
_awardList.splice(4, 0, {
awardName: '立即抽奖'
})
return _awardList;
},
// 随机打乱奖项
randArr(arr) {
for (var i = 0; i < arr.length; i++) {
var iRand = parseInt(arr.length * Math.random());
var temp = arr[i];
arr[i] = arr[iRand];
arr[iRand] = temp;
}
return arr;
}
布局
主要用了flex布局，遍历奖品list，index==4时渲染立即抽奖按钮，否则渲染奖项
<view class="content">
<view wx:for="{{awardList}}">
<view wx:if="{{index == 4}}" class="award">
<view wx:if="{{activityCount > 0}}" class="btn {{lucking ? 'lucking' : 'lucked'}}">
<text class="btn_text" catchtap="startLuck">{{item.awardName}}</text>
</view>
<view wx:else class="btn lucking">
<text class="btn_text">{{item.awardName}}</text>
</view>
</view>
<view wx:else class="award {{currentIndex == index ? 'selected' : 'unselected'}}">
<block wx:if="{{item.awardType == '00'}}">
<view class="option">
<image src="../../img/noluck_icon.png"></image>
</view>
<view class="txt">{{item.awardName}}</view>
</block>
<block wx:elif="{{item.awardType == '07'}}">
<view class="option">
<image src="../../img/mianxi_icon.png"></image>
</view>
<view class="txt">{{item.awardName}}</view>
</block>
<block wx:else>
<view class="option">
<image src="../../img/turntable_redpacket.png"></image>
<text class="price">{{util.formatMoney(item.awardMoney)}}</text>
</view>
<view class="txt">{{item.awardName}}</view>
</block>
</view>
</view>
</view>
抽奖逻辑
开始抽奖时默认选中第一个，初始化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;
}
