微信抽奖完整源代码
在此共享个微信抽奖页面，抽奖算法及微信刮刮卡的页面源代码给大家。抽奖和刮刮卡都是可以利用同样的方法来计算中奖的概率和控制奖池的数量。
微信刮刮卡页面源代码下载：
密码: mppq
抽奖算法和数据库：
在做微信的过程中用到了微信抽奖，现在把转盘抽奖程序和微信抽奖页面都共享出来，有需要的自己把两者组合一下即可
前台界面：
TP抽奖完整程序：
密码: u5x4
微信抽奖源代码：
密码: bxex
微信SDK类是一个网友共享的， 我在这里共享给大家
密码: tiwp
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。微信小程序开发之大转盘 仿天猫超市抽奖实例
作者：dzp_coder
字体：[ ] 类型：转载 时间：
本篇文章主要介绍了微信小程序开发之大转盘 仿天猫超市抽奖实例，这里整理了详细的代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
天猫超市翻牌的转盘经常用,以前做Android,没啥想法,现在尝试微信小程序,看到别人家APP里有啥好玩的,就想去做一个.
上GIF看效果:
简要的说一下.
1.外面一圈闪烁的小球是用js控制的样式.500ms改变一次样式.简单粗暴;
2.抽奖的item也是js控制背景,但是怎么样让它优雅的停下来是个问题.动画中有timingFunction可以设置速度.自己用js就没那么简单了.我这里用setInterval(),时间是线性变化的.换个斜率先小后大的函数效果应该会好一些.
注释写了一些,凑合这看吧.有不对的地方,
1.index.wxml
&view class="container-out"&
&view class="circle" wx:for="{{circleList}}" style="top:{{item.topCircle}}left:{{item.leftCircle}}background-color: {{(index%2==0)?colorCircleFirst:colorCircleSecond}};"&&/view&
&view class="container-in"&
&view class="content-out" wx:for="{{awardList}}" style="top:{{item.topAward}}left:{{item.leftAward}}background-color: {{(index==indexSelect)?colorAwardSelect:colorAwardDefault}};"&
&image class="award-image" src="{{item.imageAward}}"&&/image&
&view class="start-btn" bindtap="startGame" style=" background-color:{{isRunning?'#e7930a':'#ffe400'}}"&START&/view&
2.index.wxss
.container-out {
height: 600
width: 650
background-color: #b136b9;
margin: 100
border-radius: 40
box-shadow: 0 10px 0 #871a8e;
.container-in {
width: 580
height: 530
background-color: #871a8e;
border-radius: 40
bottom: 0;
box-shadow: inset 3px 3px 3px #fff2*/
border-radius: 50%;
height: 20
.content-out {
height: 150
width: 166.6666
background-color: #f5f0
border-radius: 15
box-shadow: 0 5px 0 #d87
/**居中 加粗*/
.start-btn {
bottom: 0;
border-radius: 15
height: 150
width: 166.6666
background-color: #ffe400;
box-shadow: 0 5px 0 #e7930a;
color: #f6251e;
text-align:
font-size: 55
font-weight:
line-height: 150
.award-image {
bottom: 0;
height: 140
width: 130
3.index.js
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 =
//圆点设置
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;
circleList.push({ topCircle: topCircle, leftCircle: leftCircle });
this.setData({
circleList: circleList
//圆点闪烁
setInterval(function () {
if (_this.data.colorCircleFirst == '#FFDF2F') {
_this.setData({
colorCircleFirst: '#FE4D32',
colorCircleSecond: '#FFDF2F',
_this.setData({
colorCircleFirst: '#FFDF2F',
colorCircleSecond: '#FE4D32',
//奖品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 = topA
//166.6666是宽.15是间距.下同
leftAward = leftAward + 166.6666 + 15;
} else if (j & 5) {
leftAward = leftA
//150是高,15是间距,下同
topAward = topAward + 150 + 15;
} else if (j & 7) {
leftAward = leftAward - 166.6666 - 15;
topAward = topA
} else if (j & 8) {
leftAward = leftA
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 =
var indexSelect = 0
var i = 0;
var timer = setInterval(function () {
indexSelect++;
//这里我只是简单粗暴用y=30*x+200函数做的处理.可根据自己的需求改变转盘速度
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))
demo代码下载
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具怎么做微信转发抽奖的活动？ - 知乎130被浏览78482分享邀请回答116 条评论分享收藏感谢收起8添加评论分享收藏感谢收起查看更多回答}