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