微信小程序实现九宫格抽奖


Posted in Javascript onApril 15, 2020

本文实例为大家分享了微信小程序实现九宫格抽奖的具体代码,适用于年会抽奖,供大家参考,具体内容如下

效果图比较卡顿,真实运行效果是旋转的

微信小程序实现九宫格抽奖

用到的素材:

微信小程序实现九宫格抽奖

实现步骤:

实现原理

改变每一项的透明度实现选中效果。利用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地址:微信小程序九宫格抽奖

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于JavaScript的一些看法
May 27 Javascript
jQuery+ajax实现顶一下,踩一下效果
Jul 17 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
Jun 27 Javascript
模拟一个类似百度google的模糊搜索下拉列表
Apr 15 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
javascript函数的四种调用模式
Jan 08 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
详解vue-cli脚手架中webpack配置方法
Aug 22 Javascript
js实现简单模态框实例
Nov 16 Javascript
ES6 Proxy实现Vue的变化检测问题
Jun 11 Javascript
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
200行HTML+JavaScript实现年会抽奖程序
Jan 22 #Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
Jan 22 #Javascript
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 #Javascript
微信小程序全局变量功能与用法详解
Jan 22 #Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 #Javascript
JavaScript JMap类定义与使用方法示例
Jan 22 #Javascript
vue2.0 如何在hash模式下实现微信分享
Jan 22 #Javascript
You might like
php中经典方法实现判断多维数组是否为空
2011/10/23 PHP
phpize的深入理解
2013/06/03 PHP
php生成excel列名超过26列大于Z时的解决方法
2014/12/29 PHP
php实现微信企业转账功能
2018/10/02 PHP
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
一个Action如何调用两个不同的方法
2014/05/22 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
2014/10/16 Javascript
JS中Location使用详解
2015/05/12 Javascript
Javascript递归打印Document层次关系实例分析
2015/05/15 Javascript
详解Jquery实现ready和bind事件
2016/04/14 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
网络传输协议(http协议)
2016/11/18 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
2017/07/07 Javascript
使用jQuery实现简单的tab框实例
2017/08/22 jQuery
详解Angular4 路由设置相关
2017/08/26 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
2018/02/01 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
2018/03/14 Javascript
jQuery实现基本动画效果的方法详解
2018/09/06 jQuery
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
python操作xml文件示例
2014/04/07 Python
Python创建系统目录的方法
2015/03/11 Python
python web框架学习笔记
2016/05/03 Python
Python学习之Django的管理界面代码示例
2018/02/10 Python
python距离测量的方法
2018/03/06 Python
通过selenium抓取某东的TT购买记录并分析趋势过程解析
2019/08/15 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
加拿大便宜的隐形眼镜商店:Clearly
2016/09/15 全球购物
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
检察官就职演讲稿
2014/01/13 职场文书
企业新年寄语
2014/04/04 职场文书
中学优秀班主任事迹材料
2014/05/01 职场文书
医院合作协议书
2014/08/19 职场文书
预备党员半年考察意见
2015/06/01 职场文书
运动会800米赞词
2015/07/22 职场文书
谢师宴家长致辞
2015/07/27 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS