⼩程序实现幸运⼤转盘功能的⽰例代码⽬录
⼀、项⽬展⽰
⼆、抽奖页
三、领奖页
⼀、项⽬展⽰
幸运⼤转盘是⼀个简单的抽奖⼩程序
参与⽤户点击抽奖便可抽取的奖品
⼆、抽奖页
抽奖页是⼀个⼤和活动规则
页⾯形式简单
主要核⼼在于
核⼼代码【旋转】如下：
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
that.setData({
animationData: port(),
代码转换
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();
// 位移到圆⼼，下⾯需要围绕圆⼼旋转
// 从(0, 0)坐标开始定义⼀条新的⼦路径
// 旋转弧度，需将⾓度转换为弧度，使⽤ degrees * 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();
// 恢复前⼀个状态
// 奖项列表
html.push({turn: i * turnNum + 'turn', lineTurn: i * turnNum + turnNum / 2 + 'turn', award: awardsConfig[i].name});
}
效果如下：
三、领奖页
领奖页是对获奖的信息进⾏罗列
<view class="top">
<image class="userinfo-avatar" src="{{head}}" background-size="cover"></image>
<text >失散多年的哥哥</text>
</view>
<view class="mid">
<button bindtap="gotoLottery" type="primary" >去抽奖</button>
</view>
<view class="txt">
<text wx:if="{{awardsList.length > 0}}">恭喜您获得了以下奖品：</text>
<text wx:if="{{awardsList.length == 0}}">您还中奖，快去抽奖吧</text>
</view>
<view class="gift" wx:for="{{awardsList}}" wx:key="unique">
<text >{{item}}</text>
</view>
到此这篇关于⼩程序实现幸运⼤转盘功能的⽰例代码的⽂章就介绍到这了，更多相关⼩程序幸运转盘内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。