微信小程序实现走马灯式抽奖
更新时间:2022年4月15日 17:44 点击:957 作者:LvyYoung
本文实例为大家分享了微信小程序实现走马灯式抽奖的具体代码,供大家参考,具体内容如下
先来看下效果
设置奖项
awardList是从后台拿到的奖项数组,list不够八位时填充谢谢参与奖项,超过八位时截取数组,然后随机打乱数组,保证奖项随机布局,第四位固定填充立即抽奖按钮
// 设置奖项 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的索引,即下一个奖项在哪激活
记录圈数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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
原文出处:https://blog.csdn.net/yang_da_da/article/details/112649128
相关文章
- 这篇文章主要介绍了微信小程序 页面传值详解的相关资料,需要的朋友可以参考下...2017-03-13
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 这篇文章主要为大家详细介绍了微信小程序自定义tabbar组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-03-14
- 这篇文章主要介绍了微信小程序 网络请求(GET请求)详解的相关资料,需要的朋友可以参考下...2016-11-22
- 这篇文章主要给大家介绍了关于微信小程序如何获取图片宽度与高度的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-10
- 这篇文章主要介绍了微信小程序 二维码生成工具 weapp-qrcode详解,教大家如何在项目中引入weapp-qrcode.js文件,通过实例代码给大家介绍的非常详细,需要的朋友可以参考下...2021-10-23
- 这篇文章主要介绍了微信小程序(应用号)开发新闻客户端实例的相关资料,需要的朋友可以参考下...2016-10-25
- 这篇文章主要介绍了微信小程序手势操作之单触摸点与多触摸点的相关资料,需要的朋友可以参考下...2017-03-13
- 这篇文章主要介绍了微信小程序 页面跳转传递值几种方法详解的相关资料,需要的朋友可以参考下...2017-01-16
- 这篇文章主要为大家详细介绍了微信小程序实现点击导航条切换页面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-19
- 这篇文章主要为大家详细介绍了微信小程序实现canvas分享朋友圈海报,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-21
- 这篇文章主要为大家详细介绍了微信小程序实现选择地址省市区三级联动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-21
- 这篇文章主要介绍了微信小程序自定义底部弹出框动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-16
- 这篇文章主要介绍了uniapp,微信小程序中使用 MQTT的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11
- 微信小程序目前的火热程度相信不用多言,最近利用空余时间用小程序实现了个动态的登录页效果,所以下面这篇文章主要给大家介绍了利用微信小程序实现登录页云层漂浮动画效果的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。...2017-05-09
- 这篇文章主要介绍了微信小程序 通过控制CSS实现view隐藏与显示的相关资料,需要的朋友可以参考下...2017-05-27
- 这篇文章主要介绍了微信小程序 PHP后端form表单提交实例详解的相关资料,需要的朋友可以参考下...2017-01-16
- 这篇文章主要介绍了微信小程序 富文本转文本实例详解的相关资料,需要的朋友可以参考下...2016-10-25
- 这篇文章主要为大家详细介绍了微信小程序入门之绘制时钟,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-10-23
- 相信大家现在都知道微信小程序吧,下面这篇文章主要给大家介绍了微信小程序开发之map地图的相关资料,分享出来供大家参考学习,文中通过示例代码介绍的非常详细,需要的朋友们下面跟着小编来一起学习学习吧。...2017-06-15