微信小程序之图片频繁变化，几秒之后输出结果(适用于抽奖)
作者：互联网
测试数据自己动手组建
先上效果图(动画滚动，体现在代码定时器里)
//抽奖
runLottery() {
const that = this
const {
getLuckyBoxHomepage,
classData,
numType
} = this.data
let openOneRewardFiveData = this.data.openOneRewardFiveData
//关闭确认消耗积分弹框
this.setData({
isshowpop: false,
//试玩数据清空
openOneRewardFiveData: []
})
//启动定时器
var inteValTime = setInterval(() => {
var result = []
var clickNumber = that.data.clickNumber + 1
if (clickNumber > classData.length - 1) {
clickNumber = 0
}
result.push(classData[clickNumber])
that.setData({
//商品滚动效果
openOneRewardData: result,
clickNumber
})
// console.log(clickNumber, "clickNumber")
// console.log(this.data.openOneRewardFiveData, "openOneRewardFiveData")
// console.log(this.data.animationStatus, "animationStatus")
}, 450);
//抽奖
this.setData({
openOneRewardFiveData: []
})
//可以先用测试数据查看效果
common.request(api, {
luckyBoxId: getLuckyBoxHomepage.id,
//开启1次还是5连抽
counts: numType == 'one' ? 1 : 5,
periods: getLuckyBoxHomepage.periods
}, 'POST').then(res => {
console.log("抽奖", res)
if (res.code == 'SUCCESS') {
if (numType == 'one') {
setTimeout(() => {
that.setData({
openOneRewardFiveData: res.data,
clickNumber: 0,
animationStatus: true,
//显示好的按钮
showBtnStatus: true
})
console.log("openOneRewardFiveData", this.data.openOneRewardFiveData)
clearInterval(inteValTime)
}, 3200)
} else {
var fiveTime = setInterval(() => {
var clickNumber_five = that.data.clickNumber_five
clickNumber_five++
//5连抽会隔0.4秒出现抽奖结果
if (clickNumber_five == 5) {
clearInterval(inteValTime)
clearInterval(fiveTime)
that.setData({
clickNumber_five: -1,
clickNumber: 0
})
return false
}
}, 450)
setTimeout(() => {
var fiveDataTime = setInterval(() => {
var clickNumber_five_data = that.data.clickNumber_five_data
clickNumber_five_data++
if (clickNumber_five_data == 5) {
clearInterval(fiveDataTime)
that.setData({
clickNumber_five_data: -1,
showBtnStatus: true,
})
return false
}
openOneRewardFiveData.push(res.data[clickNumber_five_data])
that.setData({
openOneRewardFiveData,
animationStatus: true,
clickNumber_five_data,
})
if (openOneRewardFiveData.length == 5) {
this.setData({
showBtnStatus: true
})
}
}, 480)
}, 2300)
}
//开奖弹框
this.setData({
runLotteryStatus: !this.data.runLotteryStatus
})
} else {
//积分不足做处理
}
})
},
<!-- 开奖 -->
<view class="protocol-win {{runLotteryStatus? 'block' : 'none'}}" catchtouchmove="touchmove">
<view class="protocol-content-runLottery">
<view class="market_specialEffects">
<view style="position: relative;top: 17.5%;">
<view class="market_rewardDialog">
<view wx:if="{{!animationStatus}}" class="runLotteryTitle_five">正在开盒中，请耐心等待...</view>
<view wx:else class="runLotteryTitle_five">恭喜您，获得以下奖品</view>
<!-- 开启一次弹框内容 -->
<view wx:if="{{numType=='one'}}">
<view wx:if="{{animationStatus}}" class="{{animationStatus?'animation':''}}">
<view wx:for="{{openOneRewardFiveData}}" wx:key="index">
<view class="runLotteryFlex">
<!-- 0超级盒，2幸运盒，1惊喜盒,3人气盒 -->
<view wx:if="{{item.level==0 && animationStatus}}"
style="background-image: url('https://cdn-hb.ben1.com.cn/weima/market/market_winningLogo.jpg');background-size: 100% 100%;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;">
<image src="{{item.image}}" />
</view>
<view wx:else>
<image src="{{item.image}}" />
</view>
</view>
<view class="prizeTitle" wx:if="{{item.commodityName}}">{{item.commodityName}}
</view>
<!-- 试玩 -->
<view class="prizeTitle" wx:if="{{item.prizeName}}">{{item.prizeName}}
</view>
<view class="prizeTitle" wx:if="{{item.integral>0}}">获得{{item.integral}}积分</view>
<view class="prizeMoney" wx:if="{{item.price>0}}">
<text style="font-size: 26rpx;">￥</text>
<text style="font-size: 48rpx;">{{item.price||0}}</text>
</view>
<view class="prizeMoney" wx:if="{{item.integral>0}}">
<text style="font-size: 26rpx;">积分：</text>
<text style="font-size: 48rpx;">{{item.integral}}</text>
</view>
</view>
</view>
<!-- 试玩 -->
<view wx:else>
<view wx:for="{{openOneRewardData}}" wx:key="index">
<view class="runLotteryFlex">
<view wx:if="{{item.level==0 && animationStatus}}"
style="background-image: url('https://cdn-hb.ben1.com.cn/weima/market/market_winningLogo.jpg');background-size: 100% 100%;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;">
<image src="{{item.image}}" />
</view>
<view wx:else>
<image src="{{item.image}}" />
</view>
</view>
<view class="prizeTitle">{{item.prizeName}}</view>
<view class="prizeMoney" wx:if="{{item.price>0}}">
<text style="font-size: 26rpx;">￥</text>
<text style="font-size: 48rpx;">{{item.price}}</text>
</view>
<view class="prizeMoney" wx:if="{{item.integral>0}}">
<text style="font-size: 26rpx;">积分：</text>
<text style="font-size: 48rpx;">{{item.integral}}</text>
</view>
</view>
</view>
</view>
<!-- 开启五次次弹框内容 -->
<view wx:else>
<view wx:if="{{animationStatus}}" class="{{animationStatus?'animation':''}}">
<view class="runLotteryFlex_five_flex_row">
<view class="runLotteryFlex_five_flex" wx:for="{{openOneRewardFiveData}}"
wx:key="index">
<view class="runLotteryFlex_five">
<view wx:if="{{item.level==0 && animationStatus}}"
style="background-image: url('https://cdn-hb.ben1.com.cn/weima/market/market_winningLogo.jpg');background-size: 100% 100%;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;">
<image src="{{item.image}}" />
</view>
<view wx:else>
<image src="{{item.image}}" />
</view>
</view>
<view class="prizeTitle_five" wx:if="{{item.commodityName}}">
{{item.commodityName}}</view>
<view class="prizeTitle_five" wx:if="{{item.integral>0}}">获得{{item.integral}}积分
</view>
</view>
</view>
</view>
<!-- 试玩 -->
<view wx:else>
<view wx:for="{{openOneRewardData}}" wx:key="index">
<view class="runLotteryFlex">
<view wx:if="{{animationStatus}}"
style="background-image: url('https://cdn-hb.ben1.com.cn/weima/market/market_winningLogo.jpg');background-size: 100% 100%;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;">
<image src="{{item.image}}" />
</view>
<view wx:else>
<image src="{{item.image}}" />
</view>
</view>
<view class="prizeTitle">{{item.prizeName}}</view>
<view class="prizeMoney" wx:if="{{item.price>0}}">
<text style="font-size: 26rpx;">￥</text>
<text style="font-size: 48rpx;">{{item.price}}</text>
</view>
<view class="prizeMoney" wx:if="{{item.integral>0}}">
<text style="font-size: 26rpx;">积分：</text>
<text style="font-size: 48rpx;">{{item.integral}}</text>
</view>
</view>
</view>
</view>
</view>
<view wx:if="{{!playTrueStatus}}" class="hint">可在【我的物品里查看】</view>
<view wx:else class="hint">试玩结果仅供参考!</view>
<view wx:if="{{!playTrueStatus}}">
<view wx:if="{{numType=='one' && showBtnStatus}}" class="market_rewardResult_flex"
catchtap="closeProtocol" data-type="runLottery" data-num="one">
好 的
</view>
<view wx:if="{{numType=='five' && showBtnStatus}}" class="market_rewardResult_flex"
catchtap="closeProtocol" data-type="runLottery" data-num="five">
好 的
</view>
</view>
<view wx:else>
<view wx:if="{{demoStatus}}" class="market_rewardResult_flex" catchtap="closeProtocol"
data-type="runLottery" data-num="one">
赶紧来一把真的!
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 开奖 -->
.enroll {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 999;
}
.block {
display: block;
}
.none {
display: none;
}
.market_rewardDialog .runLotteryFlex {
width: 334.41rpx;
height: 334.41rpx;
border-radius: 34rpx;
background: rgba(255, 255, 255, 1);
margin: 0 auto 42.56rpx;
display: flex;
align-items: center;
justify-content: center;
}
.market_rewardDialog .runLotteryFlex_five {
width: 160.47rpx;
height: 160.47rpx;
border-radius: 22rpx;
background: rgba(255, 255, 255, 1);
display: flex;
align-items: center;
justify-content: center;
}
.market_rewardDialog .runLotteryFlex image {
width: 226rpx;
height: 272rpx;
animation: anLoca 1s alternate infinite;
border-radius: 8rpx;
}
/* 图标动画 */
.animation {
/* animation: anLoca 1s;
animation-iteration-count: 10000;
animation-direction: alternate; */
/* Safari 和 Chrome */
/* transform: rotate(0deg) scale(0.5); */
animation: run 0.5s;
animation-iteration-count: 1;
animation-direction: alternate;
/*动画只执行一次*/
-moz-animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
-o-animation-iteration-count: 1;
animation-fill-mode: forwards;
/*让动画停留在最后一帧 */
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
}
@-webkit-keyframes run {
from {
transform: scale(0.1);
}
to {
transform: scale(1);
}
/* 25% {
transform: scale(0.8);
transform: rotate(0deg);
} */
/* 50% {
transform: scale(0.8);
transform: rotate(0deg);
}
75% {
transform: scale(1);
transform: rotate(0deg);
} */
}
.market_rewardDialog .runLotteryFlex_five_flex_row {
padding-left: 62.03rpx;
display: flex;
flex-wrap: wrap;
}
.market_rewardDialog .runLotteryFlex_five_flex {
width: 169.47rpx;
margin-right: 18.44rpx;
}
.market_rewardDialog .runLotteryFlex_five image {
width: 116rpx;
height: 139rpx;
}
.market_rewardDialog .prizeTitle {
font-weight: Medium;
font-size: 26rpx;
color: #fff;
padding-left: 84rpx;
padding-right: 80rpx;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
overflow: hidden;
text-align: center;
}
.market_rewardDialog .prizeTitle_five {
padding-top: 12.88rpx;
margin-bottom: 25.66rpx;
font-weight: Medium;
font-size: 22.52rpx;
color: #fff;
padding-left: 10.97rpx;
/* padding-right: 80rpx; */
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
/* 这里是超出几行省略 */
overflow: hidden;
}
.market_rewardDialog .prizeMoney {
color: #FFFFFF;
text-align: center;
padding-top: 20rpx;
font-weight: bold;
}
.protocol-content-runLottery .hint {
padding-top: 19rpx;
margin-bottom: 45.03rpx;
color: #FEBD6D;
font-size: 20rpx;
text-align: center;
}
标签：抽奖,clickNumber,微信,几秒,item,animation,five,rpx,data 来源： https://www.cnblogs.com/yuan-xiaohai/p/15704572.html