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

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(){}})

圖片資源: