Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you the relevant knowledge about how WeChat Mini Programs realizes the walking lantern lucky draw. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Let's take a look at the effect first.

Set up awards

AwardList is an array of awards obtained from the background. If the list is less than eight digits, thank you for participating in the award. When it exceeds eight digits, the array is intercepted, and then the array is randomly disrupted to ensure the random layout of the awards. The fourth fixed filling immediately draws the lottery button.

/ / set awards settingAward (awardList) {const len = awardList.length; const award = {awardName: 'thank you for your participation', 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时渲染立即抽奖按钮，否则渲染奖项 {{item.awardName}} {{item.awardName}} {{item.awardName}} {{item.awardName}} {{util.formatMoney(item.awardMoney)}} {{item.awardName}} 抽奖逻辑 开始抽奖时默认选中第一个，初始化idArr为currentIndex的索引，即下一个奖项在哪激活 记录圈数let cycles = 0; 开始设置interval = setInterval(frame, 100); index == 8时轮询了一圈，cycles加一 当cycles >

2: 00 deceleration timer interval = setInterval (frame, 300)

When the lottery interface has a result and after three laps, jump to the winning position, clear the timer and pop up the winning result window.

/ start lucky draw 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.appendages, {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) {/ / turn three times and jump to the winning position 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) {/ / two-lap turntable deceleration if (cycles++ > 1) {clearInterval (interval) Interval = setInterval (frame, 300);} / / set the award to jump to the corresponding position 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 .contents {width: 174rpx; height: 174rpx; background: # FFFFFF; border-radius: 20rpx; display: flex; flex-direction: column Justify-content: center; align-items: center;} above is all the content of the article "how to realize WeChat Mini Programs's Lantern drawing". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.