uniapp 实现抽奖幸运大转盘功能

实现抽奖幸运大转盘功能。

效果图：

资源图片：

如果奖品是支持动态的，需要自己重新改一下布局，逻辑不变。

代码：

<template><view class="relative"><image :src="require('@/static/newPerson/bj.png')" mode="widthFix" class="" style="width: 100%;"></image><view class="zhuan flexCenter"><image :src="require('@/static/newPerson/zhuan.png')" mode="aspectFill" class="zhuanBox" :class="{'rotate':isRotate}" :style="{transform:`rotate(${angle}deg)`}" style="width:470rpx;height:470rpx;"></image><image :src="require('@/static/newPerson/an.png')" mode="widthFix" @click="rotate()" class="an " style="width:218rpx;height:218rpx;"></image></view><!-- <view>1. 注册或未参与过此活动的用户</view><view>2. 红包奖励直接到用户账号，可以用于商城购物</view><view>3. 参与活动时，需要分享给好友一起参与</view> --></view>
</template><script>//生成随机数（下面也有一个）function rand(min, max) {return parseInt(Math.random() * (max - min + 1) + min);}export default {data() {return {isRotate:false,//是否旋转prizeList:['积分','新人红包','精选好券','谢谢参与','积分','新人红包','惊喜礼包','新人红包'],//奖品列表，决定旋转角度angle:0,//旋转角度}},methods: {rotate(){if(this.isRotate)return;this.angle=0;setTimeout(()=>{let len=this.prizeList.length;let num=rand(0,len-1);    //随机奖品，可以改成后端返回的。// let num=7;  //随机奖品，可以改成后端返回的。let prize=this.prizeList[num];// let angle=360/8*num+rand(0,44);//不排除转到中间线let angle=360/len*num+rand(4,40);//排除转到中间线this.angle=(8*360+angle);//旋转圈数8 + 奖品角度console.log('奖品：',prize,num,angle,this.angle,len)this.isRotate=true;setTimeout(()=>{this.isRotate=false;uni.showToast({title:prize,icon:'none',duration:3000})},5000)},300)}}}
</script><style>
.zhuan{position:absolute;/* top:50%; */top:46.5%;left:50%;transform: translate(-50%,-50%);
}
.zhuanBox{position: absolute;width: 100%;height: 100%;
}
.an{position: relative;/* position:absolute;top:50%;left:50%;transform: translate(-50%,-50%); */transform: rotate(0deg);
}
.an:active{transform: scale(0.95);
}
.rotate{/* animation: rotate 5s infinite linear; *//* animation-timing-function: ease-in-out; *//* animation-timing-function: cubic-bezier(0.42, 0, 0.58, 0.9); *//* animation-timing-function: cubic-bezier(0.25,0.1,0.25,1); */transform: rotate(3800deg);transition: transform 5s ease;
}@keyframes rotate {0%{transform: rotate(0deg);}100%{/* transform: rotate(360deg); */transform: rotate(3800deg);}
}
</style>

uniapp 实现抽奖幸运大转盘功能相关推荐

html5绘制图形幸运大转盘,微信小程序利用canvas 绘制幸运大转盘功能
小程序对 canvas api 跟h5的不太一致 ,所以这个搞的比较久,不多说,先贴代码 Page({ /** * 页面的初始数据 */ data: { awardsConfig: {}, resta ...
php幸运大抽奖,幸运大转盘-jQuery+PHP实现的抽奖程序-完善中
小雨在线网站自营销研究之幸运大转盘-jQuery+PHP实现的抽奖程序-完善中 1.[代码][PHP]代码小雨在线网站自营销研究 $(function () { $("#startbtn& ...
移动web：转盘抽奖(幸运大转盘)
为了获取客户.回馈客户,平台一般会推出抽奖活动类的营销页.因此web页面中,有各式各样的抽奖效果. 格子式(九宫格),背景滚动式(数字/文字/图案),旋转式(转盘),游戏式(砸蛋/拼图...).... ...
js框架jquery实现的幸运大转盘抽奖程序代码,兼容多种浏览器(Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Chrome)
博客目录 js框架jquery实现的幸运大转盘抽奖程序代码实现功能截图系统功能使用技术代码写在最后 js框架jquery实现的幸运大转盘抽奖程序代码本系统实现了一个幸运转盘抽奖,兼容多种浏 ...
C#保留2位小数几种场景总结游标遍历所有数据库循环执行修改数据库的sql命令原生js轮盘抽奖实例分析（幸运大转盘抽奖） javascript中的typeof和类型判断...
C#保留2位小数几种场景总结场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.25. ...
js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器
原文:js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器源代码下载地址:http://www.zuidaima.com/share/1779633798073344.htm 看到网页上有 ...
Jquery写的幸运大转盘抽奖实例,用asp.net处理的服务器逻辑，附源码下载
[实例简介] 该幸运大转盘抽奖实例已实现服务器端的业务逻辑代码,稍加改动就可以应用实际了文件:590m.com/f/25127180-488779229-66bbf7(访问密码:551685) [实 ...
PHP+AJAX开发幸运大转盘抽奖
PHP+AJAX开发幸运大转盘抽奖 PHP+AJAX开发幸运大转盘抽奖,通过奖品库存.中奖次数来计算中奖概率奖品设置 1 $prizes = array( 2 0 => array( 3 &q ...
cocos2dx 圆盘抽奖_cocos2d编写的类似幸运大转盘抽奖源码
压缩包内容概览: cocos2d编写的类似幸运大转盘抽奖源码-帮你选择 ; 随机 ; 程序委托 ; 背高清 ; 背 ipad ; 返回 ; 默认 ; 默认@2x ; 图标-72 ; 图标@2x ; 我 ...
php大转盘程序,jQuery幸运大转盘_jQuery+PHP抽奖程序(下)
上一篇讲解了幸运大转盘前端,而本文继续讲下半部分:PHP控制抽奖几率并最终实现转盘抽奖. 下载资源下载积分: 95 积分 PHP 首先,在ajax.php中创建一个奖项对应角度和中奖几率二维数组: ...

uniapp 实现抽奖幸运大转盘功能

uniapp 实现抽奖幸运大转盘功能相关推荐

最新文章

热门文章