微信小程序怎么實現轉盤抽獎

這篇文章主要介紹“微信小程序怎么實現轉盤抽獎”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“微信小程序怎么實現轉盤抽獎”文章能幫助大家解決問題。

lucky-draw.wxss：

.lucky_draw_zp{ width: 502rpx; height: 502rpx; margin: 0 auto; position: relative;}
.lucky_draw_zp_img , .lucky_draw_zp_btn{ width: 100%; height: 100%; position: absolute; left: 0; top: 0;}

lucky-draw.wxml：

<view class="lucky_draw_zp" bindtap="getLucky">
    <image  class="lucky_draw_zp_img" src="{{zpData.zpImg}}" mode="aspectFit"></image>
    <image class="lucky_draw_zp_btn" src="../../../images/zp_btn.png" mode="aspectFit"></image>
</view>

lucky-draw.js：

 Page({
 
    /**
     * 頁面的初始數據
     */
    data: {
        zpData:{
            //轉盤主圖圖片url
            zpImg:'../../../images/zp.png',
            
            equalParts:null, //一共多少等份
            oneAngle:null, //每一等份多少度
            
            // ******** 轉盤獎品數據：后臺獲取數據 ********
            //注：根據轉盤圖片對應的值（轉盤圖片指針處順時針向右數，起始1，獎品對應的格子數【第幾等份上】）
            awardSetting:[
                '第1個格子對應內容',
                '第2個格子對應內容',
                '第3個格子對應內容',
                '第4個格子對應內容',
                '第5個格子對應內容',
                '第6個格子對應內容',
            ],
        },
        
        ifRoate:false, //轉盤是否在轉動（判斷阻止多次點擊）
        zpRotateDeg:'', //旋轉角度
        
        // ******** 抽獎結果數據：后臺獲取數據 ********
        curKey:null, //抽獎結果 ： 取值范圍 1 至 總格子數
        ifWinning:null, //是否中獎
    },
 
 
 
 
    // 獲取轉盤初始數據
    getZpData(){
        let zpImg = 'zpData.zpImg';
        let awardSetting = 'zpData.awardSetting';
        this.setData({
            [zpImg]:'../../../images/zp.png',
            [awardSetting]:[
                '1',
                '2',
                '3',
                '4',
                '5',
                '6',
            ],
        });
        
        this.setZpDefault();
    },
    // 根據轉盤初始數據設置轉盤初始關鍵參數
    setZpDefault(){
        let equalPartsNum = this.data.zpData.awardSetting.length;
        let oneAngleNum = 360 / equalPartsNum;
        let equalParts = 'zpData.equalParts';
        let oneAngle = 'zpData.oneAngle';
        this.setData({
            //一共多少等份
            [equalParts] : equalPartsNum,
            // 根據轉盤得等份數設置 每一等份多少度
            [oneAngle] : oneAngleNum,
        });
    },
 
 
    // 設置旋轉動效
    setToRotate(degNum){
        this.setData({
            zpRotateDeg : '-webkit-transform: rotate(' + degNum + 'deg);transform: rotate(' + degNum + 'deg);-webkit-transition: all 5s ease;transition: all 5s ease;',
        });
    },
    //根據 設置的 指針停止時指向的格子（中獎結果），設置其旋轉角度區間
    setRotate(awardSettingNumber){ //awardSettingNumber  取值范圍 1 至 總格子數
        setTimeout(() => {
            //轉盤停止時 指針 指向的格子 最小角度
            let minAngle = 360 - awardSettingNumber * this.data.zpData.oneAngle + 5;
            //轉盤停止時 指針 指向的格子 最大角度
            let maxAngle = 360 - (awardSettingNumber - 1) * this.data.zpData.oneAngle - 5;
            //旋轉區間
            let newAngle = Math.floor(minAngle + Math.random() * (maxAngle - minAngle)) + 360 * 15;
            
            this.setToRotate(newAngle);
            
            setTimeout(() => {
                this.roateEnd(awardSettingNumber);
            }, 5150);
        },50);
    },
    //旋轉結束執行
    roateEnd(awardSettingNumber){
        console.log('當前指向格子數 -- ' + awardSettingNumber , this.data.curKey);
        console.log('當前指向格子數對應內容 -- ' + this.data.zpData.awardSetting[awardSettingNumber - 1] , this.data.zpData.awardSetting[this.data.curKey - 1]);
        
        // 是否中獎
        if(this.data.ifWinning){
            console.log('中獎');
        }else{
            console.log('未中獎');
        }
        
        setTimeout(() => {
            this.setData({
                ifRoate : false, //轉盤是否在轉動
            });
        }, 100);
    },
 
 
    //點擊抽獎
    getLucky(){
        if(this.data.ifRoate){
            return false;
        }
        
        this.setData({
            ifRoate : true, //轉盤是否在轉動
            zpRotateDeg : ''
        });
                
        // 請求后臺獲取抽獎結果中...
        
        /*test*/
        var res = {
            status:1,
            curKey:Math.floor(1 + Math.random() * this.data.zpData.equalParts), //抽獎結果 ： 取值范圍 1 至 總格子數
            ifWinning:true, //是否中獎
            info:'沒機會或什么什么'
        }
        /*test*/
        
        /
            if(res.status == 1){
                this.setData({
                    curKey : res.curKey,
                    ifWinning : res.ifWinning
                });
                
                this.setRotate(this.data.curKey);
            }else{
                this.setData({
                    ifRoate : false, //轉盤是否在轉動
                });
                wx.showModal({
                    title: '溫馨提示',
                    showCancel:false,
                    content: res.info,
                })
            }
        /
    },
 
 
    /**
     * 生命周期函數--監聽頁面加載
     */
    onLoad: function (options) {
 
    },
 
    /**
     * 生命周期函數--監聽頁面初次渲染完成
     */
    onReady: function () {
 
    },
 
    /**
     * 生命周期函數--監聽頁面顯示
     */
    onShow: function () {
        this.getZpData();
    },
 
    /**
     * 生命周期函數--監聽頁面隱藏
     */
    onHide: function () {
 
    },
 
    /**
     * 生命周期函數--監聽頁面卸載
     */
    onUnload: function () {
 
    },
 
    /**
     * 頁面相關事件處理函數--監聽用戶下拉動作
     */
    onPullDownRefresh: function () {
 
    },
 
    /**
     * 頁面上拉觸底事件的處理函數
     */
    onReachBottom: function () {
 
    },
 
    /**
     * 用戶點擊右上角分享
     */
    onShareAppMessage: function () {
 
    }
})

圖片資源：

關于“微信小程序怎么實現轉盤抽獎”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。