微信小程序转盘抽奖的实现方法

微信小程序转盘抽奖的实现方法 本文实例为大家分享了微信小程序实现转盘抽奖的具体代码,供大家参考,具体内容如下 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: 1

本文实例为大家分享了微信小程序实现转盘抽奖的具体代码，供大家参考，具体内容如下

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 style="{{zpRotateDeg}}" 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 () {
 
    }
})

图片资源：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。