微信小程序轉(zhuǎn)盤抽獎的實現(xiàn)方法
更新時間:2022年07月27日 17:21:31 作者:羽筠
這篇文章主要為大家詳細介紹了微信小程序轉(zhuǎn)盤抽獎的實現(xiàn)方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序?qū)崿F(xiàn)轉(zhuǎn)盤抽獎的具體代碼,供大家參考,具體內(nèi)容如下
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({ ? ?? ?/** ?? ? * 頁面的初始數(shù)據(jù) ?? ? */ ?? ?data: { ?? ??? ?zpData:{ ?? ??? ??? ?//轉(zhuǎn)盤主圖圖片url ?? ??? ??? ?zpImg:'../../../images/zp.png', ?? ??? ??? ? ?? ??? ??? ?equalParts:null, //一共多少等份 ?? ??? ??? ?oneAngle:null, //每一等份多少度 ?? ??? ??? ? ?? ??? ??? ?// ******** 轉(zhuǎn)盤獎品數(shù)據(jù):后臺獲取數(shù)據(jù) ******** ?? ??? ??? ?//注:根據(jù)轉(zhuǎn)盤圖片對應的值(轉(zhuǎn)盤圖片指針處順時針向右數(shù),起始1,獎品對應的格子數(shù)【第幾等份上】) ?? ??? ??? ?awardSetting:[ ?? ??? ??? ??? ?'第1個格子對應內(nèi)容', ?? ??? ??? ??? ?'第2個格子對應內(nèi)容', ?? ??? ??? ??? ?'第3個格子對應內(nèi)容', ?? ??? ??? ??? ?'第4個格子對應內(nèi)容', ?? ??? ??? ??? ?'第5個格子對應內(nèi)容', ?? ??? ??? ??? ?'第6個格子對應內(nèi)容', ?? ??? ??? ?], ?? ??? ?}, ?? ??? ? ?? ??? ?ifRoate:false, //轉(zhuǎn)盤是否在轉(zhuǎn)動(判斷阻止多次點擊) ?? ??? ?zpRotateDeg:'', //旋轉(zhuǎn)角度 ?? ??? ? ?? ??? ?// ******** 抽獎結果數(shù)據(jù):后臺獲取數(shù)據(jù) ******** ?? ??? ?curKey:null, //抽獎結果 : 取值范圍 1 至 總格子數(shù) ?? ??? ?ifWinning:null, //是否中獎 ?? ?}, ? ? ? ? ?? ?// 獲取轉(zhuǎn)盤初始數(shù)據(jù) ?? ?getZpData(){ ?? ??? ?let zpImg = 'zpData.zpImg'; ?? ??? ?let awardSetting = 'zpData.awardSetting'; ?? ??? ?this.setData({ ?? ??? ??? ?[zpImg]:'../../../images/zp.png', ?? ??? ??? ?[awardSetting]:[ ?? ??? ??? ??? ?'1', ?? ??? ??? ??? ?'2', ?? ??? ??? ??? ?'3', ?? ??? ??? ??? ?'4', ?? ??? ??? ??? ?'5', ?? ??? ??? ??? ?'6', ?? ??? ??? ?], ?? ??? ?}); ?? ??? ? ?? ??? ?this.setZpDefault(); ?? ?}, ?? ?// 根據(jù)轉(zhuǎn)盤初始數(shù)據(jù)設置轉(zhuǎn)盤初始關鍵參數(shù) ?? ?setZpDefault(){ ?? ??? ?let equalPartsNum = this.data.zpData.awardSetting.length; ?? ??? ?let oneAngleNum = 360 / equalPartsNum; ?? ??? ?let equalParts = 'zpData.equalParts'; ?? ??? ?let oneAngle = 'zpData.oneAngle'; ?? ??? ?this.setData({ ?? ??? ??? ?//一共多少等份 ?? ??? ??? ?[equalParts] : equalPartsNum, ?? ??? ??? ?// 根據(jù)轉(zhuǎn)盤得等份數(shù)設置 每一等份多少度 ?? ??? ??? ?[oneAngle] : oneAngleNum, ?? ??? ?}); ?? ?}, ? ? ?? ?// 設置旋轉(zhuǎn)動效 ?? ?setToRotate(degNum){ ?? ??? ?this.setData({ ?? ??? ??? ?zpRotateDeg : '-webkit-transform: rotate(' + degNum + 'deg);transform: rotate(' + degNum + 'deg);-webkit-transition: all 5s ease;transition: all 5s ease;', ?? ??? ?}); ?? ?}, ?? ?//根據(jù) 設置的 指針停止時指向的格子(中獎結果),設置其旋轉(zhuǎn)角度區(qū)間 ?? ?setRotate(awardSettingNumber){ //awardSettingNumber ?取值范圍 1 至 總格子數(shù) ?? ??? ?setTimeout(() => { ?? ??? ??? ?//轉(zhuǎn)盤停止時 指針 指向的格子 最小角度 ?? ??? ??? ?let minAngle = 360 - awardSettingNumber * this.data.zpData.oneAngle + 5; ?? ??? ??? ?//轉(zhuǎn)盤停止時 指針 指向的格子 最大角度 ?? ??? ??? ?let maxAngle = 360 - (awardSettingNumber - 1) * this.data.zpData.oneAngle - 5; ?? ??? ??? ?//旋轉(zhuǎn)區(qū)間 ?? ??? ??? ?let newAngle = Math.floor(minAngle + Math.random() * (maxAngle - minAngle)) + 360 * 15; ?? ??? ??? ? ?? ??? ??? ?this.setToRotate(newAngle); ?? ??? ??? ? ?? ??? ??? ?setTimeout(() => { ?? ??? ??? ??? ?this.roateEnd(awardSettingNumber); ?? ??? ??? ?}, 5150); ?? ??? ?},50); ?? ?}, ?? ?//旋轉(zhuǎn)結束執(zhí)行 ?? ?roateEnd(awardSettingNumber){ ?? ??? ?console.log('當前指向格子數(shù) -- ' + awardSettingNumber , this.data.curKey); ?? ??? ?console.log('當前指向格子數(shù)對應內(nèi)容 -- ' + 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, //轉(zhuǎn)盤是否在轉(zhuǎn)動 ?? ??? ??? ?}); ?? ??? ?}, 100); ?? ?}, ? ? ?? ?//點擊抽獎 ?? ?getLucky(){ ?? ??? ?if(this.data.ifRoate){ ?? ??? ??? ?return false; ?? ??? ?} ?? ??? ? ?? ??? ?this.setData({ ?? ??? ??? ?ifRoate : true, //轉(zhuǎn)盤是否在轉(zhuǎn)動 ?? ??? ??? ?zpRotateDeg : '' ?? ??? ?}); ?? ??? ??? ??? ? ?? ??? ?// 請求后臺獲取抽獎結果中... ?? ??? ? ?? ??? ?/*test*/ ?? ??? ?var res = { ?? ??? ??? ?status:1, ?? ??? ??? ?curKey:Math.floor(1 + Math.random() * this.data.zpData.equalParts), //抽獎結果 : 取值范圍 1 至 總格子數(shù) ?? ??? ??? ?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, //轉(zhuǎn)盤是否在轉(zhuǎn)動 ?? ??? ??? ??? ?}); ?? ??? ??? ??? ?wx.showModal({ ?? ??? ??? ??? ??? ?title: '溫馨提示', ?? ??? ??? ??? ??? ?showCancel:false, ?? ??? ??? ??? ??? ?content: res.info, ?? ??? ??? ??? ?}) ?? ??? ??? ?} ?? ??? ?/ ?? ?}, ? ? ?? ?/** ?? ? * 生命周期函數(shù)--監(jiān)聽頁面加載 ?? ? */ ?? ?onLoad: function (options) { ? ?? ?}, ? ?? ?/** ?? ? * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成 ?? ? */ ?? ?onReady: function () { ? ?? ?}, ? ?? ?/** ?? ? * 生命周期函數(shù)--監(jiān)聽頁面顯示 ?? ? */ ?? ?onShow: function () { ?? ??? ?this.getZpData(); ?? ?}, ? ?? ?/** ?? ? * 生命周期函數(shù)--監(jiān)聽頁面隱藏 ?? ? */ ?? ?onHide: function () { ? ?? ?}, ? ?? ?/** ?? ? * 生命周期函數(shù)--監(jiān)聽頁面卸載 ?? ? */ ?? ?onUnload: function () { ? ?? ?}, ? ?? ?/** ?? ? * 頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作 ?? ? */ ?? ?onPullDownRefresh: function () { ? ?? ?}, ? ?? ?/** ?? ? * 頁面上拉觸底事件的處理函數(shù) ?? ? */ ?? ?onReachBottom: function () { ? ?? ?}, ? ?? ?/** ?? ? * 用戶點擊右上角分享 ?? ? */ ?? ?onShareAppMessage: function () { ? ?? ?} })
圖片資源:
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
基于JS實現(xiàn)二維碼圖片固定在右下角某處并跟隨滾動條滾動
這篇文章主要介紹了基于JS實現(xiàn)二維碼圖片固定在右下角某處并跟隨滾動條滾動,代碼簡單易懂非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-02-02