微信小程序转盘抽奖的实现方法

本文实例为大家分享了微信小程序实现转盘抽奖的具体代码，供大家参考，具体内容如下

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

图片资源：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于微信小程序转盘抽奖的实现方法的详细内容...