本文实例为大家分享了微信小程序实现翻牌抽奖的具体代码,供大家参考,具体内容如下
效果图如下所示
这里做的比较简陋,就花了一点时间实现了翻牌抽奖效果,提供思路
.wxml
& lt;视图类="按钮" bindtap=霸俅巍痹谥匦路? lt;/view>
& lt;视图类=癱urin-index”比;
& lt;视图bindtap="{{是否# 63;”:tamin}}”天气:为="{{9}}"天气:关键=爸甘辈牧现甘?{{指数+ 1}}”类=" currin{{真的==指数+ 1 & # 63;“animt”:“}}{{真的!=指数+ 1,,盈余# 63;“animt”:“}}{{真的==" & # 63;“cinton”+(指数+ 1):“}}”在
{{真的==指数+ 1 & # 63;失败:“}}{{真的!=指数+ 1,,真的!=" & # 63;biutin:“}}{{真的==" & # 63;“点击翻牌”:"}}
& lt;/view>
& lt;/view>
.wxss
视图{
box-sizing: border-box;
}
.button {
宽度:40%;
身高:80 rpx;
行高:80 rpx;
background - color: # fadbd9;
颜色:# e54d42;
text-align:中心;
border - radius: 10 rpx;
保证金:30 rpx 30%;
浮:左;
位置:相对;
}
.curin-index {
宽度:100%;
浮:左;
}
.currin {
margin-left: 4%;
margin-top: 50 rpx;
宽度:28%;
浮:左;
背景图片:线性渐变(45度,# 0081 ff, # 1 cbbb4);
颜色:# fff;
text-align:中心;
身高:200 rpx;
行高:200 rpx;
border - radius: 10 rpx;
位置:相对;
}
{前.currin::
内容:“”;
显示:块;
背景:继承;
过滤器:模糊(10 rpx);
位置:绝对的;
宽度:100%;
高度:100%;
上图:10 rpx;
左:10 rpx;
z - index: 1;
透明度:0.4;
transform-origin: 0 0;
border - radius:继承;
变换:规模(1,1);
}
.cinton1 {
动画:cinton1替代线性2 1 s;
}
@keyframes cinton1 {
从{
上图:0;
左:0;
}
,{
上图:230年rpx;
左:230 rpx;
}
}
.cinton2 {
动画:cinton2替代线性2 1 s;
}
@keyframes cinton2 {
从{
上图:0;
左:0;
}
,{
上图:230年rpx;
左:0 rpx;
}
}
.cinton3 {
动画:cinton3替代线性2 1 s;
}
@keyframes cinton3 {
从{
上图:0;
左:0;
}
,{
上图:230年rpx;
左:-230 rpx;
}
}
.cinton4 {
动画:cinton4替代线性2 1 s;
}
@keyframes cinton4 {
从{
上图:0;
左:0;
}
,{
上图:0 rpx;
左:230 rpx;
}
}
.cinton6 {
动画:cinton6替代线性2 1 s;
}
@keyframes cinton6 {
从{
上图:0;
左:0;
}
,{
上图:0 rpx;
左:-230 rpx;
}
}
.cinton7 {
动画:cinton7替代线性2 1 s;
}
@keyframes cinton7 {
从{
上图:0;
左:0;
}
,{
上图:-230年rpx;
左:230 rpx;
}
}
.cinton8 {
动画:cinton8替代线性2 1 s;
}
@keyframes cinton8 {
从{
上图:0;
左:0;
}
,{
上图:-230年rpx;
左:0 rpx;
}
}
.cinton9 {
动画:cinton9替代线性2 1 s;
}
@keyframes cinton9 {
从{
上图:0;
左:0;
}
,{
上图:-230年rpx;
左:-230 rpx;
}
}
.animt {
动画:fanzhuan 1.2秒;
}
@keyframes fanzhuan {
0% {
变换:角度(150 px) rotateY(0度);
}
50% {
变换:角度(150 px) rotateY(0度);
}
100% {
变换:角度(150 px) rotateY(179.9度);
}
}
. js
页面({
数据:{
是否:假的,
失败:“点击翻牌”,
真的:”,
实现:0,
顺差:假的,
biutin:“点击翻牌”,
},
:函数(e) {
如果(this.data。实现3==| | this.data。实现==0){
this.setData ({
是否:假的,
失败:“点击翻牌”,
真的:”,
实现:0,
顺差:假的,
biutin:“点击翻牌”,
}）
其他}{
wx.showToast ({
标题:“正在执行抽奖中…”,
图标:“没有”,
持续时间:2000
}）
返回假
}
},
tamin:函数(e) {
让这=让指数=e.currentTarget.dataset.index
that.setData ({
:是否真实,
真的:指数,
实现:1、
}）
setTimeout(函数(){
that.setData ({
失败:”,
}）
},500)
setTimeout(函数(){
that.setData ({
失败:“有奖品”,
顺差:没错,
实现:2
}）
},1200)
setTimeout(函数(){
that.setData ({
biutin:”,
}）
},1700)
setTimeout(函数(){
that.setData ({
biutin:“没有奖品”,
实现:3,
}）
},2500)
}
})
