微信小程序怎么实现转盘抽奖
lucky-draw.wxss：
.lucky_draw_zp{width:502rpx;height:502rpx;margin:0auto;position:relative;}.lucky_draw_zp_img,.lucky_draw_zp_btn{width:100%;height:100%;position:absolute;left:0;top:0;}lucky-draw.wxml：
<viewclass="lucky_draw_zp"bindtap="getLucky"><imageclass="lucky_draw_zp_img"src="{{zpData.zpImg}}"mode="aspectFit"></image><imageclass="lucky_draw_zp_btn"src="../../../images/zp_btn.png"mode="aspectFit"></image></view>lucky-draw.js：
Page({/***页面的初始数据*/data:{zpData:{//转盘主图图片urlzpImg:'../../../images/zp.png',equalParts:null,//一共多少等份oneAngle:null,//每一等份多少度//********转盘奖品数据：后台获取数据********//注：根据转盘图片对应的值（转盘图片指针处顺时针向右数，起始1，奖品对应的格子数【第几等份上】）awardSetting:['第1个格子对应内容','第2个格子对应内容','第3个格子对应内容','第4个格子对应内容','第5个格子对应内容','第6个格子对应内容',],},ifRoate:false,//转盘是否在转动（判断阻止多次点击）zpRotateDeg:'',//旋转角度//********抽奖结果数据：后台获取数据********curKey:null,//抽奖结果：取值范围1至总格子数ifWinning:null,//是否中奖},//获取转盘初始数据getZpData(){letzpImg='zpData.zpImg';letawardSetting='zpData.awardSetting';this.setData({[zpImg]:'../../../images/zp.png',[awardSetting]:['1','2','3','4','5','6',],});this.setZpDefault();},//根据转盘初始数据设置转盘初始关键参数setZpDefault(){letequalPartsNum=this.data.zpData.awardSetting.length;letoneAngleNum=360/equalPartsNum;letequalParts='zpData.equalParts';letoneAngle='zpData.oneAngle';this.setData({//一共多少等份[equalParts]:equalPartsNum,//根据转盘得等份数设置每一等份多少度[oneAngle]:oneAngleNum,});},//设置旋转动效setToRotate(degNum){this.setData({zpRotateDeg:'-webkit-transform:rotate('+degNum+'deg);transform:rotate('+degNum+'deg);-webkit-transition:all5sease;transition:all5sease;',});},//根据设置的指针停止时指向的格子（中奖结果），设置其旋转角度区间setRotate(awardSettingNumber){//awardSettingNumber取值范围1至总格子数setTimeout(()=>{//转盘停止时指针指向的格子最小角度letminAngle=360-awardSettingNumber*this.data.zpData.oneAngle+5;//转盘停止时指针指向的格子最大角度letmaxAngle=360-(awardSettingNumber-1)*this.data.zpData.oneAngle-5;//旋转区间letnewAngle=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){returnfalse;}this.setData({ifRoate:true,//转盘是否在转动zpRotateDeg:''});//请求后台获取抽奖结果中.../*test*/varres={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(){}})图片资源：
关于“微信小程序怎么实现转盘抽奖”的内容就介绍到这里了，感谢大家的阅读。