本文实例为大家分享了微信小程序实现九宫格抽奖的具体代码,适用于年会抽奖,供大家参考,具体内容如下
效果图比较卡顿,真实运行效果是旋转的
用到的素材:
实现步骤:
实现原理
改变每一项的透明度实现选中效果。利用setTimeOut时间使旋转速度越来越慢。达到慢慢停止的效果。实际应用中可以将9张奖品图片和中奖项均通过接口返回。以方便奖品的调整。
1.布局绘制
<view class="container"> 停止位置:<input value='{{luckPosition}}' style="width:100%;text-align:center" bindinput='input' type='number'></input> <view class='frame_view'> <view class='frame_row'> <image class='frame_item' style='opacity:{{color[0]}}' src='{{images[0]}}'></image> <image class='frame_item' style='opacity:{{color[1]}}' src='{{images[1]}}'></image> <image class='frame_item' style='opacity:{{color[2]}}' src='{{images[2]}}'></image> </view> <view class='frame_row'> <image class='frame_item' style='opacity:{{color[7]}}' src='{{images[7]}}'></image> <image class='frame_item' src='{{btnconfirm}}' bindtap='{{clickLuck}}'></image> <image class='frame_item' style='opacity:{{color[3]}}' src='{{images[3]}}'></image> </view> <view class='frame_row'> <image class='frame_item' style='opacity:{{color[6]}}' src='{{images[6]}}'></image> <image class='frame_item' style='opacity:{{color[5]}}' src='{{images[5]}}'></image> <image class='frame_item' style='opacity:{{color[4]}}' src='{{images[4]}}'></image> </view> </view> </view>
2.数据准备
//计数器 var interval = null; //值越大旋转时间越长 即旋转速度 var intime = 50; data: { color: [0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5], //9张奖品图片 images: ['/images/item.png', '/images/item1.png', '/images/item.png', '/images/item1.png', '/images/item.png', '/images/item1.png', '/images/item.png', '/images/item1.png', '/images/item.png'], //确定按钮 btnconfirm: '/images/dianjichoujiang.png', //点击事件 clickLuck:'clickLuck', //中奖位置 luckPosition:0, },
3.显示界面时慢慢转动
//进入页面时缓慢切换 loadAnimation:function (){ var e = this; //初始位置为0 var index = 0; //每1秒钟切换一次位置 interval = setInterval(function () { if (index > 7) { index = 0; e.data.color[7] = 0.5 } else if (index != 0) { e.data.color[index - 1] = 0.5 } e.data.color[index] = 1 e.setData({ color: e.data.color, }) index++; }, 1000); }
4.停止旋转
//which为中奖位置 需要停止时调用该方法 stop: function (which){ var e = this; //清空计数器 clearInterval(interval); //初始化当前位置 var current = -1; var color = e.data.color; for (var i = 0; i < color.length; i++) { if (color[i] == 1) { current = i; } } //下标从1开始 var index = current + 1; e.stopLuck(which, index, intime, 10); }, /** * which:中奖位置 * index:当前位置 * time:时间标记 * splittime:每次增加的时间 值越大减速越快 */ stopLuck: function (which, index,time,splittime){ var e = this; //值越大出现中奖结果后减速时间越长 var color = e.data.color; setTimeout(function () { //重置前一个位置 if (index > 7) { index = 0; color[7] = 0.5 } else if (index != 0) { color[index - 1] = 0.5 } //当前位置为选中状态 color[index] = 1 e.setData({ color: color, }) //如果旋转时间过短或者当前位置不等于中奖位置则递归执行 //直到旋转至中奖位置 if (time < 400 || index != which){ //越来越慢 splittime++; time += splittime; //当前位置+1 index++; e.stopLuck(which, index, time, splittime); }else{ //1秒后显示弹窗 setTimeout(function () { if (which == 1 || which == 3 || which == 5 || which == 7) { //中奖 wx.showModal({ title: '提示', content: '恭喜中奖', showCancel: false, success: function (res) { if (res.confirm) { //设置按钮可以点击 e.setData({ btnconfirm: '/images/dianjichoujiang.png', clickLuck: 'clickLuck', }) e.loadAnimation(); } } }) } else { //中奖 wx.showModal({ title: '提示', content: '很遗憾未中奖', showCancel: false, success:function(res){ if(res.confirm){ //设置按钮可以点击 e.setData({ btnconfirm: '/images/dianjichoujiang.png', clickLuck: 'clickLuck', }) e.loadAnimation(); } } }) } }, 1000); } }, time); },
5.可以点击按钮后停止抽奖 或者点击开始抽奖停止一段时候后自动停止
//模拟网络请求时间 设为两秒 var stoptime = 2000; setTimeout(function () { e.stop(e.data.luckPosition); }, stoptime)
gitub地址:微信小程序九宫格抽奖
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
风云阁资源网 Design By www.bgabc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
风云阁资源网 Design By www.bgabc.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年09月21日
2024年09月21日
- 杨阳《约定HQCDII》头版限量编号2024[WAV+CUE]
- 曝《黑神话:悟空》DLC明年推出 农历新年前后
- PS5日本涨价19% 索尼股价应声上涨2.7%
- 《黑神话》发行平台遭大规模网攻 外媒却鲜有报道
- 伍佰《爱你伍佰年 世纪典藏原音精选3CD》[WAV+CUE][2.3GB]
- 伍佰《爱情的尽头》[WAV+CUE][2.6GB]
- 伍佰 《光环摇滚之声DSD》[WAV+CUE][500MB]
- 王菲.1999-只爱陌生人【EMI百代】【WAV+CUE】
- 林美音.1993-酒后的心声【瑞华】【WAV+CUE】
- 群星.2024-凡人歌电视剧原声带【正午阳光】【FLAC分轨】
- 黑神话悟空上品骨悚然精魄获取方法一览|上品骨悚然精魄收集攻略
- 《演灭Evotinction》正式登陆多平台发售!带你进入科幻潜行新境界
- 命运圣契2024公测最新兑换码大全 命运圣契开服可用兑换码汇总
- 银霞.1979-《回答·兰花草》新加坡限量复黑版[WAV+CUE]
- 王菲.1996-《乐乐精逊SACD日本限量版[WAV+CUE]