//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))
}
})
微信小程序大转盘源码,亲测能用!
需积分: 0 34 浏览量
更新于2023-02-06
收藏 140KB ZIP 举报
微信小程序是一种轻量级的应用开发平台,由腾讯公司推出,主要应用于移动端,为用户提供便捷的服务体验。它基于JavaScript、WXML(WeiXin Markup Language)和WXSS(WeiXin Style Sheets)三种核心技术构建,允许开发者在微信环境中开发原生应用效果的小程序。
大转盘是常见的一种互动游戏形式,常用于营销活动、抽奖或促销活动中,通过旋转转盘让用户有机会获得不同的奖励。在微信小程序中实现大转盘功能,可以吸引用户参与,提高用户活跃度和粘性。
本资源"微信小程序大转盘源码"提供了一个完整的微信小程序大转盘的实现,适用于创建各种抽奖活动。亲测能用,意味着这个源码经过验证,能够在实际项目中正常运行,减少了开发者自己从零开始编写代码的工作量。
源码中可能包含以下关键组成部分:
1. **页面结构**:使用WXML和WXSS设计转盘的UI界面,包括转盘的布局、奖品区域、按钮等元素。WXML负责结构,类似于HTML,而WXSS则处理样式,类似于CSS。
2. **逻辑控制**:使用JavaScript处理转盘的逻辑,比如点击开始按钮启动转盘、计算转盘停止位置、判断中奖情况等。这部分可能涉及到动画效果的实现,如利用wx.createAnimation API来创建动画对象,并绑定到转盘元素上。
3. **数据管理**:使用小程序的数据绑定机制,管理奖品列表、当前状态等信息。数据驱动视图更新,确保用户界面与后台逻辑同步。
4. **事件监听**:监听用户的操作,如点击开始、重置等,触发相应的逻辑处理。
5. **API调用**:可能涉及到微信小程序的其他API,例如获取用户授权、网络请求等,以便实现更复杂的功能,如记录用户抽奖记录、联网验证中奖信息等。
6. **自定义组件**:源码可能封装了一些可复用的组件,如转盘本身就是一个组件,可以通过参数配置实现不同场景下的复用。
7. **样式调整**:为了适应不同的主题和需求,源码通常会包含丰富的样式变量,方便开发者进行定制。
学习和使用这个源码,开发者可以了解微信小程序的开发流程,增强对微信小程序特性的理解,同时也能快速构建自己的抽奖活动。在实际应用时,根据自身需求,可以修改源码中的奖品设置、中奖概率、视觉样式等,以满足特定的业务场景。
这个"微信小程序大转盘源码"是一个实践性和教育性都很强的资源,对于想要学习微信小程序开发或者需要快速搭建抽奖功能的开发者来说,具有很高的参考价值。通过深入研究和实践,开发者可以进一步提升自己的技能,同时也可以灵活地将这些技术应用到其他类似的项目中。
刘海舰010
- 粉丝: 5
- 资源: 3
最新资源
- MATLAB仿真bp神经网络预测电力负荷 形式:程序 实现功能:使用前几日负荷数据预测未来负荷数据 使用bp神经网络 得到误差分析图
- MATLAB仿真QPSK调制信号通过AWGN信道的误符号率和误比特率分析 形式:程序 程序实现功能: 仿真正交相移键控QPSK信号调制的基带数字通信系统通过AWGN信道的误符号率(SER)和误比特率(
- VMware-workstation-17.5.2下载
- (2025)高级电工证考试题及答案.doc
- (2025)工会知识竞赛题库(含参考答案.pptx
- (2025)工业机器人考试题库及答案.doc
- (2025)公务员考试必考知识点总结.doc
- (2025)公务员考试常识必考知识点总结.doc
- (2025)公共卫生基本知识考试题库及答案.doc
- (2025)公务员廉政知识考试题库及答案.doc
- (2025)公务员面试万能模板(完美版).doc
- (2025)管理人员安全质量培训考试题库及答案.doc
- (2025)焊工理论知识考试题及答案.doc
- (2025)护理三基考试题库(含答案).doc
- (2025)计算机网络技术考试题(含答案).doc
- (2025)基本公共卫生服务项目考试题库(含答案).doc