微信小程序實現(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; }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
詳解小程序中h5頁面onShow實現(xiàn)及跨頁面通信方案
這篇文章主要介紹了小程序中h5頁面onShow實現(xiàn)及跨頁面通信方案,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-05-05Bootstrap3 input輸入框插入glyphicon圖標的方法
這篇文章主要介紹了Bootstrap3 input輸入框插入glyphicon圖標的方法的相關資料,需要的朋友可以參考下2016-05-05JS實現(xiàn)求出一個字符串中最多出現(xiàn)的字符和個數(shù)
這篇文章主要為大家介紹了字符串中最多的重復字符的計算代碼,需要的朋友可以參考下2007-07-07使用BootStrap實現(xiàn)表格隔行變色及hover變色并在需要時出現(xiàn)滾動條
這篇文章主要介紹了使用BootStrap實現(xiàn)表格隔行變色及hover變色并在需要時出現(xiàn)滾動條效果,代碼簡單易懂,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-01-01