微信小程序轉(zhuǎn)盤抽獎(jiǎng)的實(shí)現(xiàn)方法
更新時(shí)間：2022年07月27日 17:21:31 作者：羽筠
這篇文章主要為大家詳細(xì)介紹了微信小程序轉(zhuǎn)盤抽獎(jiǎng)的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)轉(zhuǎn)盤抽獎(jiǎng)的具體代碼，供大家參考，具體內(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)盤獎(jiǎng)品數(shù)據(jù)：后臺(tái)獲取數(shù)據(jù) ********
?? ??? ??? ?//注：根據(jù)轉(zhuǎn)盤圖片對(duì)應(yīng)的值（轉(zhuǎn)盤圖片指針處順時(shí)針向右數(shù)，起始1，獎(jiǎng)品對(duì)應(yīng)的格子數(shù)【第幾等份上】）
?? ??? ??? ?awardSetting:[
?? ??? ??? ??? ?'第1個(gè)格子對(duì)應(yīng)內(nèi)容',
?? ??? ??? ??? ?'第2個(gè)格子對(duì)應(yīng)內(nèi)容',
?? ??? ??? ??? ?'第3個(gè)格子對(duì)應(yīng)內(nèi)容',
?? ??? ??? ??? ?'第4個(gè)格子對(duì)應(yīng)內(nèi)容',
?? ??? ??? ??? ?'第5個(gè)格子對(duì)應(yīng)內(nèi)容',
?? ??? ??? ??? ?'第6個(gè)格子對(duì)應(yīng)內(nèi)容',
?? ??? ??? ?],
?? ??? ?},
?? ??? ?
?? ??? ?ifRoate:false, //轉(zhuǎn)盤是否在轉(zhuǎn)動(dòng)（判斷阻止多次點(diǎn)擊）
?? ??? ?zpRotateDeg:'', //旋轉(zhuǎn)角度
?? ??? ?
?? ??? ?// ******** 抽獎(jiǎng)結(jié)果數(shù)據(jù)：后臺(tái)獲取數(shù)據(jù) ********
?? ??? ?curKey:null, //抽獎(jiǎng)結(jié)果 ： 取值范圍 1 至 總格子數(shù)
?? ??? ?ifWinning:null, //是否中獎(jiǎng)
?? ?},
?
?
?
?
?? ?// 獲取轉(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ù)設(shè)置轉(zhuǎn)盤初始關(guā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ù)設(shè)置 每一等份多少度
?? ??? ??? ?[oneAngle] : oneAngleNum,
?? ??? ?});
?? ?},
?
?
?? ?// 設(shè)置旋轉(zhuǎn)動(dòng)效
?? ?setToRotate(degNum){
?? ??? ?this.setData({
?? ??? ??? ?zpRotateDeg : '-webkit-transform: rotate(' + degNum + 'deg);transform: rotate(' + degNum + 'deg);-webkit-transition: all 5s ease;transition: all 5s ease;',
?? ??? ?});
?? ?},
?? ?//根據(jù) 設(shè)置的 指針停止時(shí)指向的格子（中獎(jiǎng)結(jié)果），設(shè)置其旋轉(zhuǎn)角度區(qū)間
?? ?setRotate(awardSettingNumber){ //awardSettingNumber ?取值范圍 1 至 總格子數(shù)
?? ??? ?setTimeout(() => {
?? ??? ??? ?//轉(zhuǎn)盤停止時(shí) 指針 指向的格子 最小角度
?? ??? ??? ?let minAngle = 360 - awardSettingNumber * this.data.zpData.oneAngle + 5;
?? ??? ??? ?//轉(zhuǎn)盤停止時(shí) 指針 指向的格子 最大角度
?? ??? ??? ?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)結(jié)束執(zhí)行
?? ?roateEnd(awardSettingNumber){
?? ??? ?console.log('當(dāng)前指向格子數(shù) -- ' + awardSettingNumber , this.data.curKey);
?? ??? ?console.log('當(dāng)前指向格子數(shù)對(duì)應(yīng)內(nèi)容 -- ' + this.data.zpData.awardSetting[awardSettingNumber - 1] , this.data.zpData.awardSetting[this.data.curKey - 1]);
?? ??? ?
?? ??? ?// 是否中獎(jiǎng)
?? ??? ?if(this.data.ifWinning){
?? ??? ??? ?console.log('中獎(jiǎng)');
?? ??? ?}else{
?? ??? ??? ?console.log('未中獎(jiǎng)');
?? ??? ?}
?? ??? ?
?? ??? ?setTimeout(() => {
?? ??? ??? ?this.setData({
?? ??? ??? ??? ?ifRoate : false, //轉(zhuǎn)盤是否在轉(zhuǎn)動(dòng)
?? ??? ??? ?});
?? ??? ?}, 100);
?? ?},
?
?
?? ?//點(diǎn)擊抽獎(jiǎng)
?? ?getLucky(){
?? ??? ?if(this.data.ifRoate){
?? ??? ??? ?return false;
?? ??? ?}
?? ??? ?
?? ??? ?this.setData({
?? ??? ??? ?ifRoate : true, //轉(zhuǎn)盤是否在轉(zhuǎn)動(dòng)
?? ??? ??? ?zpRotateDeg : ''
?? ??? ?});
?? ??? ??? ??? ?
?? ??? ?// 請(qǐng)求后臺(tái)獲取抽獎(jiǎng)結(jié)果中...
?? ??? ?
?? ??? ?/*test*/
?? ??? ?var res = {
?? ??? ??? ?status:1,
?? ??? ??? ?curKey:Math.floor(1 + Math.random() * this.data.zpData.equalParts), //抽獎(jiǎng)結(jié)果 ： 取值范圍 1 至 總格子數(shù)
?? ??? ??? ?ifWinning:true, //是否中獎(jiǎng)
?? ??? ??? ?info:'沒機(jī)會(huì)或什么什么'
?? ??? ?}
?? ??? ?/*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)動(dòng)
?? ??? ??? ??? ?});
?? ??? ??? ??? ?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 () {
?
?? ?},
?
?? ?/**
?? ? * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
?? ? */
?? ?onPullDownRefresh: function () {
?
?? ?},
?
?? ?/**
?? ? * 頁面上拉觸底事件的處理函數(shù)
?? ? */
?? ?onReachBottom: function () {
?
?? ?},
?
?? ?/**
?? ? * 用戶點(diǎn)擊右上角分享
?? ? */
?? ?onShareAppMessage: function () {
?
?? ?}
})圖片資源：
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 微信小程序?qū)崿F(xiàn)轉(zhuǎn)盤抽獎(jiǎng)
- 微信小程序開發(fā)之大轉(zhuǎn)盤 仿天貓超市抽獎(jiǎng)實(shí)例
- 微信小程序?qū)崿F(xiàn)簡單九宮格抽獎(jiǎng)
- 微信小程序?qū)崿F(xiàn)走馬燈式抽獎(jiǎng)
- 微信小程序抽獎(jiǎng)組件的使用步驟
- 微信小程序?qū)崿F(xiàn)翻牌抽獎(jiǎng)動(dòng)畫
- 微信小程序 扭蛋抽獎(jiǎng)機(jī)css3動(dòng)畫實(shí)現(xiàn)詳解
- 微信小程序?qū)崿F(xiàn)九宮格抽獎(jiǎng)
- 微信小程序?qū)崿F(xiàn)多宮格抽獎(jiǎng)活動(dòng)
- 微信小程序 搖一搖抽獎(jiǎng)簡單實(shí)例實(shí)現(xiàn)代碼
相關(guān)文章
BootStrap智能表單實(shí)戰(zhàn)系列(七)驗(yàn)證的支持
這篇文章主要介紹了BootStrap智能表單實(shí)戰(zhàn)系列(七)驗(yàn)證的支持 ,凡是涉及到用戶編輯信息然后保存的頁面，都涉及到一個(gè)數(shù)據(jù)是否符合要求的檢查，需要客服端和服務(wù)器端的校驗(yàn)的問題，本文介紹非常詳細(xì)，具有參考價(jià)值，需要的朋友可以參考下2016-06-06
這篇文章主要介紹了javascript中的閉包概念與用法,結(jié)合具體實(shí)例形式分析了javascript閉包的概念、原理、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-07-07
在做UI的時(shí)候 ，有時(shí)會(huì)要解析url的search部分，裝了一個(gè)實(shí)用方法，共享給大家。2010-02-02
微信小程序?qū)崿F(xiàn)漸入漸出動(dòng)畫效果
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)漸入漸出動(dòng)畫效果的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
詳解JavaScript中js對(duì)象與JSON格式字符串的相互轉(zhuǎn)換
本篇文章主要介紹了JavaScript中js對(duì)象與JSON格式字符串的相互轉(zhuǎn)換，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-02-02
javascript 打字游戲?qū)崿F(xiàn)代碼，非常不錯(cuò)的效果，功能還不是很完善，喜歡的朋友可以參考下。2010-04-04
項(xiàng)目開發(fā)過程中遇到JSON字符串回顯的情況,直接顯示的話效果很丑,不方便查看,因此需要在前端頁面對(duì)JSON進(jìn)行格式化顯示,下面這篇文章主要給大家介紹了關(guān)于前端顯示json格式化的相關(guān)資料,需要的朋友可以參考下2024-03-03
javascript下查找父節(jié)點(diǎn)的簡單方法
javascript下查找父節(jié)點(diǎn)的簡單方法...2007-08-08
這篇文章主要是對(duì)JS畫線的實(shí)例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-11-11
javascript中定義私有方法說明(private method)
本篇文章主要是對(duì)javascript中定義私有方法(private method)進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-01-01