微信小程序轉盤抽獎的實現方法
本文實例為大傢分享瞭微信小程序實現轉盤抽獎的具體代碼，供大傢參考，具體內容如下
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 () {
}
})
圖片資源：
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。