微信小程序转盘抽奖的实现方法-前端开发

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

图片资源：

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