Shulou(Shulou.com)06/01 Report--

This article is to share with you about how WeChat Mini Programs realizes the function of lucky turntable. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

First, project display

The Lucky turntable is a simple lucky draw Mini Program.

Participating users can click on the lucky draw to draw the prize of roulette.

II. Lucky draw page

The lucky draw page is a big roulette and activity rules.

The page form is simple.

The main core is roulette.

The core code [roulette rotation] is as follows:

GetLottery: function () {var that = this var awardIndex = Math.random () * 6 > 0; / / var awardsConfig = app.awardsConfig, runNum = 8 if (awardIndex)

< 2) awardsConfig.chance = false console.log(awardIndex) // 旋转抽奖 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' }) // 绘制转盘 var awardsConfig = app.awardsConfig.awards, len = awardsConfig.length, rotateDeg = 360 / len / 2 + 90, html = [], turnNum = 1 / len // 文字旋转 turn 值 that.setData({ btnDisabled: app.awardsConfig.chance ? '' : 'disabled' }) var ctx = wx.createContext() for (var i = 0; i < len; i++) { // 保存当前状态 ctx.save(); // 开始一条新路径 ctx.beginPath(); // 位移到圆心，下面需要围绕圆心旋转 ctx.translate(150, 150); // 从(0, 0)坐标开始定义一条新的子路径 ctx.moveTo(0, 0); // 旋转弧度,需将角度转换为弧度,使用 degrees * Math.PI/180 公式进行计算。 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(); // 恢复前一个状态 ctx.restore(); // 奖项列表 html.push({turn: i * turnNum + 'turn', lineTurn: i * turnNum + turnNum / 2 + 'turn', award: awardsConfig[i].name}); } 效果如下： 三、领奖页 领奖页是对获奖的信息进行罗列 失散多年的哥哥 去抽奖 恭喜您获得了以下奖品： 您还中奖，快去抽奖吧 {{item}}

Thank you for reading! This is the end of the article on "how to realize the Lucky turntable function of WeChat Mini Programs". I hope the above content can be of some help to you, so that you can learn more knowledge. If you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.