2. 程式人生 > 其它 >微信小程式之圖片頻繁變化，幾秒之後輸出結果(適用於抽獎)

微信小程式之圖片頻繁變化，幾秒之後輸出結果(適用於抽獎)

阿新 • • 發佈：2021-12-18 
測試資料自己動手組建
先上效果圖(動畫滾動，體現在程式碼定時器裡)
    //抽獎
    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;
}




   
 
 
 

             
          

            
  

           

               
              
             

            

            

            
相關推薦

			   
            
            
            
 

    


    
    
微信小程式之圖片頻繁變化，幾秒之後輸出結果(適用於抽獎)

    
測試資料自己動手組建先上效果圖(動畫滾動，體現在程式碼定時器裡)
//抽獎
runLottery() {
 


  
 

    


    
    
Java微信小程式oss圖片上傳的實現方法

    
先將圖片上傳到伺服器，再將伺服器上的圖片傳入oss中

小程式js
//啟動上傳等待中...
 


  
 

    


    
    
詳解微信小程式之提高應用速度小技巧

    
WeTest 導讀
小程式科普類的文章已經很多了，今天這裡講的是針對小程式的優化方法，可以有效提高小程式的響應速度和使用者體驗。當然，開發體驗也提高不少。
 


  
 

    


    
    
微信小程式儲存圖片到相簿許可權設定

    
微信小程式儲存圖片到相簿可以分成兩種：一種是儲存網路圖片，一種是儲存本地圖片
 


  
 

    


    
    
微信小程式之導航滑塊檢視容器功能的實現程式碼(簡單兩步)

    
先看效果圖：
這個滑塊除了可以點選上方的導航，還可以左右切換頁面，隨之導航也跟這切換。
 


  
 

    


    
    
微信小程式之搜尋分頁功能的實現程式碼

    
直接上程式碼：
wxml:
<wxs src=\"../wxs/changeimg.wxs\" module=\"changeimg\" />
<view class=\"container\">
 


  
 

    


    
    
微信小程式之swiper標籤

    
swiper標籤是微信小程式中自帶的輪播圖元件，然我們可以快速的建立一個輪播圖，不再需要像在HTML中那樣麻煩。
 


  
 

    


    
    
微信小程式 之 分享給朋友 以及二維碼傳參及接收

    
1、分享給朋友
分享給朋友是小程式自帶API:onShareAppMessage
button元件配置open-type=\'share\'
 


  
 

    


    
    
微信小程式儲存圖片到相簿

    
1、經常會碰到這個場景：長按儲存圖片到相簿。小程式儲存圖片到相簿需要獲取使用者的授權才可以儲存成功，所以首先我們需要獲取小程式的授權狀態（拒絕/授權），授權狀態會被記錄在小程式快取中，只有刪除小程式後才
 


  
 

    


    
    
開發原生微信小程式之清除快取

    
開發原生微信小程式之清除快取
遇到這個問題的時候，真的是很奔潰，我的電腦是windows系統，安裝微信開發者工具，結果發現在開發過程中每次修改程式碼，要編譯看效果的時候都不起作用，後來發現要清除快取（
 


  
 

    


    
    
基於uni-app的微信小程式之分包

    
作者:故事我忘了￠個人微信公眾號:程式猿的月光寶盒
目錄0. 緣由1. 關於分包1.0 這是 官方文件1.1 注意事項2.使用方法2.1 首先你得有個uniapp的微信小程式專案2.2 在pages同級建立分包2.3 pages.json配置2.4 然後呢,
 


  
 

    


    
    
微信小程式對圖片進行canvas壓縮的方法示例詳解

    
微信小程式其實自帶一個圖片壓縮的API wx.compressImage，但是這玩意目前感受就是個垃圾。IOS大多數情況下據說還可以，安卓有的時候降低質量壓縮後體積反而變大，而且沒辦法控制其壓縮至具體指定的大小，壓縮後多大看
 


  
 

    


    
    
微信小程式之下載(下載檔案tempFilePath字尾unknown)

    
1.下載檔案
使用downloadFile下載API
/* 直接這樣寫的話，會出現下載檔案字尾名為unknown的情況 */
 


  
 

    


    
    
微信小程式之實現載入動畫的旋轉方塊案例效果（前端學習收藏夾必備）

    
技術標籤：小程式cssanimationcss3html小程式
文章目錄
一、案例效果一1.1 WXML程式碼：1.2 WXSS程式碼
 


  
 

    


    
    
微信小程式之canvas

    
需求：分享當前商品儲存相簿以及分享卡片給好友
實現：canvas 2D 小程式自帶的分享
 


  
 

    


    
    
微信小程式base64圖片儲存到手機相簿

    
問題：base64圖片不能直接用wx.saveImageToPhotosAlbum儲存到手機相簿
解決：
先用fs.writeFile寫入本地檔案，再wx.saveImageToPhotosAlbum儲存到手機相簿
 


  
 

    


    
    
微信小程式之引導頁自動跳轉

    
技術標籤：微信小程式微信小程式引導頁歡迎頁自動跳轉
# 情境
現在想要自己做一個微信小程式，參考DD小程式，返現人家的有類似的引導頁
 


  
 

    


    
    
微信小程式之高德地圖多點路線規劃過程示例詳解

    
呼叫
如何呼叫高德api？
高德官方給出的https://lbs.amap.com/api/wx/summary/開放文件比較詳細：
 


  
 

    


    
    
微信小程式選擇圖片控制元件

    
本文例項為大家分享了微信小程式選擇圖片控制元件的具體程式碼，供大家參考，具體內容如下
 


  
 

    


    
    
微信小程式之canvas畫布

    
技術標籤：微信小程式小程式
一、前言
只要幹不死，就要往死幹！！！
本次帶來的是關於微信小程式之畫布的相關功能，具體詳見程式碼↓