//index.js
//获取应用实例
var app = getApp()
Page({
data: {
circleList: [],//圆点数组
awardList: [],//奖品数组
colorCircleFirst: '#FFDF2F',//圆点颜色1
colorCircleSecond: '#FE4D32',//圆点颜色2
colorAwardDefault: '#F5F0FC',//奖品默认颜色
colorAwardSelect: '#ffe400',//奖品选中颜色
indexSelect: 0,//被选中的奖品index
isRunning: false,//是否正在抽奖
imageAward: [
'../../images/1.jpg',
'../../images/2.jpg',
'../../images/3.jpg',
'../../images/4.jpg',
'../../images/5.jpg',
'../../images/6.jpg',
'../../images/7.jpg',
'../../images/8.jpg',
],//奖品图片数组
},
onLoad: function () {
var _this = this;
//圆点设置
var leftCircle = 7.5;
var topCircle = 7.5;
var circleList = [];
for (var i = 0; i < 24; i++) {
if (i == 0) {
topCircle = 15;
leftCircle = 15;
} else if (i < 6) {
topCircle = 7.5;
leftCircle = leftCircle + 102.5;
} else if (i == 6) {
topCircle = 15
leftCircle = 620;
} else if (i < 12) {
topCircle = topCircle + 94;
leftCircle = 620;
} else if (i == 12) {
topCircle = 565;
leftCircle = 620;
} else if (i < 18) {
topCircle = 570;
leftCircle = leftCircle - 102.5;
} else if (i == 18) {
topCircle = 565;
leftCircle = 15;
} else if (i < 24) {
topCircle = topCircle - 94;
leftCircle = 7.5;
} else {
return
}
circleList.push({ topCircle: topCircle, leftCircle: leftCircle });
}
this.setData({
circleList: circleList
})
//圆点闪烁
setInterval(function () {
if (_this.data.colorCircleFirst == '#FFDF2F') {
_this.setData({
colorCircleFirst: '#FE4D32',
colorCircleSecond: '#FFDF2F',
})
} else {
_this.setData({
colorCircleFirst: '#FFDF2F',
colorCircleSecond: '#FE4D32',
})
}
}, 500)
//奖品item设置
var awardList = [];
//间距,怎么顺眼怎么设置吧.
var topAward = 25;
var leftAward = 25;
for (var j = 0; j < 8; j++) {
if (j == 0) {
topAward = 25;
leftAward = 25;
} else if (j < 3) {
topAward = topAward;
//166.6666是宽.15是间距.下同
leftAward = leftAward + 166.6666 + 15;
} else if (j < 5) {
leftAward = leftAward;
//150是高,15是间距,下同
topAward = topAward + 150 + 15;
} else if (j < 7) {
leftAward = leftAward - 166.6666 - 15;
topAward = topAward;
} else if (j < 8) {
leftAward = leftAward;
topAward = topAward - 150 - 15;
}
var imageAward = this.data.imageAward[j];
awardList.push({ topAward: topAward, leftAward: leftAward, imageAward: imageAward });
}
this.setData({
awardList: awardList
})
},
//开始游戏
startGame: function () {
if (this.data.isRunning) return
this.setData({
isRunning: true
})
var _this = this;
var indexSelect = 0
var i = 0;
var timer = setInterval(function () {
indexSelect++;
//这里我只是简单粗暴用y=30*x+200函数做的处理.可根据自己的需求改变转盘速度
i += 30;
if (i > 1000) {
//去除循环
clearInterval(timer)
//获奖提示
wx.showModal({
title: '恭喜您',
content: '获得了第' + (_this.data.indexSelect + 1) + "个优惠券",
showCancel: false,//去掉取消按钮
success: function (res) {
if (res.confirm) {
_this.setData({
isRunning: false
})
}
}
})
}
indexSelect = indexSelect % 8;
_this.setData({
indexSelect: indexSelect
})
}, (200 + i))
}
})
没有合适的资源?快使用搜索试试~ 我知道了~
微信小程序源码 实现 大转盘 功能 源码下载
共16个文件
jpg:8个
js:3个
wxss:2个
需积分: 1 0 下载量 109 浏览量
2024-04-30
16:18:52
上传
评论
收藏 140KB ZIP 举报
温馨提示
微信小程序的大转盘功能是一种常见的互动营销工具,它通过模拟真实的转盘抽奖活动,增强用户参与感和体验感。用户通过点击转盘,转盘随即旋转并在停止后显示用户所获得的奖品或结果。这种功能通常用于促销活动、节日庆典或用户回馈活动中,以提高用户粘性和活跃度。 实现大转盘功能需要结合微信小程序的前端开发能力和后端服务支持。前端主要负责转盘的动画效果和用户交互逻辑,而后端则处理奖品信息、中奖概率设置以及中奖结果的生成和验证。开发者需要熟悉微信小程序的开发框架,包括WXML、WXSS、JavaScript和JSON,以及可能涉及的动画效果实现技巧。 此外,为了确保大转盘功能的公平性和安全性,后端逻辑的设计尤为重要。它需要能够随机生成中奖结果,同时保证结果的不可预测性和不可篡改性。通过精心设计,大转盘不仅能够为用户带来乐趣,也能为商家带来营销价值。
资源推荐
资源详情
资源评论
收起资源包目录
大转盘.zip (16个子文件)
大转盘
tianmao
pages
index
index.wxml 677B
index.js 4KB
index.json 2B
index.wxss 1KB
app.json 238B
app.js 719B
utils
util.js 481B
app.wxss 18B
images
2.jpg 10KB
6.jpg 22KB
1.jpg 22KB
5.jpg 13KB
8.jpg 11KB
3.jpg 14KB
7.jpg 32KB
4.jpg 18KB
共 16 条
- 1
资源评论
Layla_c
- 粉丝: 1051
- 资源: 180
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- TG-2024-05-23-204718255.mp4
- 候志强@181 5428 8938_20240420112107.amr
- spispispispispi
- 实验二:IP协议分析.zip
- 驱动代码驱动代码驱动代码驱动代码
- SVID_20240523_141155_1.mp4
- Code for the complete guide to tkinter tutorial
- 关于百货中心供应链管理系统.zip
- SimpleFolderIcon-master 修改Unity的Project下的文件夹图标
- A python Tkinter widget to display tile based maps
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功