微信小程序转盘抽奖的实现方法
作者：羽筠
这篇文章主要为大家详细介绍了微信小程序转盘抽奖的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现转盘抽奖的具体代码，供大家参考，具体内容如下
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 () {
}
})图片资源：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。