微信小程序實現(xiàn)走馬燈式抽獎

更新時間：2022年04月15日 15:49:15 作者：LvyYoung

這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)走馬燈式抽獎，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序實現(xiàn)走馬燈式抽獎的具體代碼，供大家參考，具體內容如下

先來看下效果

設置獎項

awardList是從后臺拿到的獎項數(shù)組，list不夠八位時填充謝謝參與獎項，超過八位時截取數(shù)組，然后隨機打亂數(shù)組，保證獎項隨機布局，第四位固定填充立即抽獎按鈕

// 設置獎項
? 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的索引，即下一個獎項在哪激活
記錄圈數(shù)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;
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: