微信小程序?qū)崿F(xiàn)走馬燈式抽獎
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)走馬燈式抽獎的具體代碼,供大家參考,具體內(nèi)容如下
先來看下效果
設(shè)置獎項(xiàng)
awardList是從后臺拿到的獎項(xiàng)數(shù)組,list不夠八位時填充謝謝參與獎項(xiàng),超過八位時截取數(shù)組,然后隨機(jī)打亂數(shù)組,保證獎項(xiàng)隨機(jī)布局,第四位固定填充立即抽獎按鈕
// 設(shè)置獎項(xiàng) ? 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; ? }, ? // 隨機(jī)打亂獎項(xiàng) ? 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時渲染立即抽獎按鈕,否則渲染獎項(xiàng)
<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>
抽獎邏輯
開始抽獎時默認(rèn)選中第一個,初始化idArr為currentIndex的索引,即下一個獎項(xiàng)在哪激活
記錄圈數(shù)let cycles = 0;
開始設(shè)置interval = setInterval(frame, 100);
index == 8
時輪詢了一圈,cycles加一
當(dāng)cycles > 2時減速定時器interval = setInterval(frame, 300);
當(dāng)抽獎接口有結(jié)果且轉(zhuǎn)了三圈后跳到獲獎位置,清除定時器并彈出獲獎結(jié)果彈窗
// 開始抽獎 ? 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) { ? ? ? ? // 轉(zhuǎn)三圈后跳到獲獎位置 ? ? ? ? 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) { ? ? ? ? ? // 兩圈后轉(zhuǎn)盤減速 ? ? ? ? ? if (cycles++ > 1) { ? ? ? ? ? ? clearInterval(interval); ? ? ? ? ? ? interval = setInterval(frame, 300); ? ? ? ? ? } ? ? ? ? } ? ? ? } ? ? ? // 設(shè)置獎項(xiàng)跳到對應(yīng)位置 ? ? ? 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; }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
函數(shù)四種調(diào)用模式以及其中的this指向
本文主要介紹了函數(shù)四種調(diào)用模式以及其中的this指向的相關(guān)知識,具有一定的參考價值,下面跟著小編一起來看下吧2017-01-01javaScript 刪除確認(rèn)實(shí)現(xiàn)方法小結(jié)
因?yàn)閷τ趦?nèi)容的刪除是件很重要的事,所以一般的系統(tǒng)中,都需要刪除確認(rèn)一下,以免誤刪,具體的方法如下,大家可以參考下。2009-12-12詳解小程序中h5頁面onShow實(shí)現(xiàn)及跨頁面通信方案
這篇文章主要介紹了小程序中h5頁面onShow實(shí)現(xiàn)及跨頁面通信方案,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-05-05Bootstrap3 input輸入框插入glyphicon圖標(biāo)的方法
這篇文章主要介紹了Bootstrap3 input輸入框插入glyphicon圖標(biāo)的方法的相關(guān)資料,需要的朋友可以參考下2016-05-05微信小程序上傳圖片并等比列壓縮到指定大小的實(shí)例代碼
這篇文章主要介紹了微信小程序 上傳圖片并等比列壓縮到指定大小,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10JS實(shí)現(xiàn)求出一個字符串中最多出現(xiàn)的字符和個數(shù)
這篇文章主要為大家介紹了字符串中最多的重復(fù)字符的計(jì)算代碼,需要的朋友可以參考下2007-07-07使用BootStrap實(shí)現(xiàn)表格隔行變色及hover變色并在需要時出現(xiàn)滾動條
這篇文章主要介紹了使用BootStrap實(shí)現(xiàn)表格隔行變色及hover變色并在需要時出現(xiàn)滾動條效果,代碼簡單易懂,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-01-01