标签：抽奖 clickNumber 微信 几秒 item animation five rpx data

测试数据自己动手组建
先上效果图(动画滚动，体现在代码定时器里)

    //抽奖
    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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。