微信小程序?qū)崿F(xiàn)幸運(yùn)大轉(zhuǎn)盤(pán)功能的示例代碼
一、項(xiàng)目展示
幸運(yùn)大轉(zhuǎn)盤(pán)是一個(gè)簡(jiǎn)單的抽獎(jiǎng)小程序
參與用戶點(diǎn)擊抽獎(jiǎng)便可抽取輪盤(pán)的獎(jiǎng)品
二、抽獎(jiǎng)頁(yè)
抽獎(jiǎng)頁(yè)是一個(gè)大輪盤(pán)和活動(dòng)規(guī)則
頁(yè)面形式簡(jiǎn)單
主要核心在于輪盤(pán)
核心代碼【輪盤(pán)旋轉(zhuǎn)】如下:
getLottery: function () { var that = this var awardIndex = Math.random() * 6 >>> 0; // 獲取獎(jiǎng)品配置 var awardsConfig = app.awardsConfig, runNum = 8 if (awardIndex < 2) awardsConfig.chance = false console.log(awardIndex) // 旋轉(zhuǎn)抽獎(jiǎng) app.runDegs = app.runDegs || 0 console.log('deg', app.runDegs) app.runDegs = app.runDegs + (360 - app.runDegs % 360) + (360 * runNum - awardIndex * (360 / 6)) console.log('deg', app.runDegs) var animationRun = wx.createAnimation({ duration: 4000, timingFunction: 'ease' }) that.animationRun = animationRun animationRun.rotate(app.runDegs).step() that.setData({ animationData: animationRun.export(), btnDisabled: 'disabled' }) // 繪制轉(zhuǎn)盤(pán) var awardsConfig = app.awardsConfig.awards, len = awardsConfig.length, rotateDeg = 360 / len / 2 + 90, html = [], turnNum = 1 / len // 文字旋轉(zhuǎn) turn 值 that.setData({ btnDisabled: app.awardsConfig.chance ? '' : 'disabled' }) var ctx = wx.createContext() for (var i = 0; i < len; i++) { // 保存當(dāng)前狀態(tài) ctx.save(); // 開(kāi)始一條新路徑 ctx.beginPath(); // 位移到圓心,下面需要圍繞圓心旋轉(zhuǎn) ctx.translate(150, 150); // 從(0, 0)坐標(biāo)開(kāi)始定義一條新的子路徑 ctx.moveTo(0, 0); // 旋轉(zhuǎn)弧度,需將角度轉(zhuǎn)換為弧度,使用 degrees * Math.PI/180 公式進(jìn)行計(jì)算。 ctx.rotate((360 / len * i - rotateDeg) * Math.PI/180); // 繪制圓弧 ctx.arc(0, 0, 150, 0, 2 * Math.PI / len, false); // 顏色間隔 if (i % 2 == 0) { ctx.setFillStyle('rgba(255,184,32,.1)'); }else{ ctx.setFillStyle('rgba(255,203,63,.1)'); } // 填充扇形 ctx.fill(); // 繪制邊框 ctx.setLineWidth(0.5); ctx.setStrokeStyle('rgba(228,55,14,.1)'); ctx.stroke(); // 恢復(fù)前一個(gè)狀態(tài) ctx.restore(); // 獎(jiǎng)項(xiàng)列表 html.push({turn: i * turnNum + 'turn', lineTurn: i * turnNum + turnNum / 2 + 'turn', award: awardsConfig[i].name}); }
效果如下:
三、領(lǐng)獎(jiǎng)頁(yè)
領(lǐng)獎(jiǎng)頁(yè)是對(duì)獲獎(jiǎng)的信息進(jìn)行羅列
<view class="top"> <image class="userinfo-avatar" src="{{head}}" background-size="cover"></image> <text style="font-size:40rpx">失散多年的哥哥</text> </view> <view class="mid"> <button bindtap="gotoLottery" type="primary" style="width:600rpx;background-color:#D75858">去抽獎(jiǎng)</button> </view> <view class="txt"> <text wx:if="{{awardsList.length > 0}}">恭喜您獲得了以下獎(jiǎng)品:</text> <text wx:if="{{awardsList.length == 0}}">您還中獎(jiǎng),快去抽獎(jiǎng)吧</text> </view> <view class="gift" wx:for="{{awardsList}}" wx:key="unique"> <text style="font-size:34rpx;margin-left:30rpx">{{item}}</text> </view>
到此這篇關(guān)于微信小程序?qū)崿F(xiàn)幸運(yùn)大轉(zhuǎn)盤(pán)功能的示例代碼的文章就介紹到這了,更多相關(guān)小程序 幸運(yùn)轉(zhuǎn)盤(pán)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 如何在微信小程序?qū)崿F(xiàn)一個(gè)幸運(yùn)轉(zhuǎn)盤(pán)小游戲
- 微信小程序?qū)崿F(xiàn)轉(zhuǎn)盤(pán)抽獎(jiǎng)
- 微信小程序利用canvas 繪制幸運(yùn)大轉(zhuǎn)盤(pán)功能
- 微信小程序開(kāi)發(fā)之大轉(zhuǎn)盤(pán) 仿天貓超市抽獎(jiǎng)實(shí)例
- pygame可視化幸運(yùn)大轉(zhuǎn)盤(pán)實(shí)現(xiàn)
- Vue 幸運(yùn)大轉(zhuǎn)盤(pán)實(shí)現(xiàn)思路詳解
- Android實(shí)現(xiàn)可點(diǎn)擊的幸運(yùn)大轉(zhuǎn)盤(pán)
相關(guān)文章
Javascript 拖拽雛形中的一些問(wèn)題(逐行分析代碼,讓你輕松了拖拽的原理)
這篇文章主要介紹了Javascript 拖拽雛形中的一些問(wèn)題(逐行分析代碼,讓你輕松了拖拽的原理),需要的朋友可以參考下2015-01-01談?wù)勎覍?duì)JavaScript DOM事件的理解
DOM與事件是JavaScript最核心的組成部分之一,他們賦予了頁(yè)面無(wú)限的想象空間,你根本無(wú)法離開(kāi)他們,否則js將寸步難行。本文給大家分享我對(duì)javascript dom事件的了解,對(duì)javascript dom事件相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-12-12javascript中不提供sleep功能如何實(shí)現(xiàn)這個(gè)功能
javascript中不提供sleep功能,而我們時(shí)長(zhǎng)會(huì)用到這個(gè)功能,下面與大家分享個(gè)不錯(cuò)的解決方法,而且在不同的機(jī)器上的執(zhí)行速度是一致的2014-05-05js實(shí)現(xiàn)鍵盤(pán)Enter鍵提交表單的方法
這篇文章主要介紹了js實(shí)現(xiàn)鍵盤(pán)Enter鍵提交表單的方法,涉及javascript鍵盤(pán)事件的相關(guān)操作技巧,需要的朋友可以參考下2015-05-05JavaScript自動(dòng)設(shè)置IFrame高度的小例子
JavaScript自動(dòng)設(shè)置IFrame高度的小例子,需要的朋友可以參考一下2013-06-06FireBug 調(diào)試JS入門(mén)教程 如何調(diào)試JS
這篇文章主要為大家介紹下通過(guò)firefox的FireBug調(diào)試JS,需要的朋友可以參考下2013-12-12