微信小程序开发之大转盘仿天猫超市抽奖

天猫超市翻牌的转盘经常用,以前做Android,没啥想法,现在尝试微信小程序,看到别人家APP里有啥好玩的,就想去做一个.
上GIF看效果:

简要的说一下.

1.外面一圈闪烁的小球是用js控制的样式.500ms改变一次样式.简单粗暴;
2.抽奖的item也是js控制背景,但是怎么样让它优雅的停下来是个问题.动画中有timingFunction可以设置速度.自己用js就没那么简单了.我这里用setInterval(),时间是线性变化的.换个斜率先小后大的函数效果应该会好一些.

CSDN微信小程序开发专栏,欢迎关注!
技术相关:
1.微信小程序之仿微信漂流瓶
2.微信小程序开发之视频播放器 Video 弹幕弹幕颜色自定义
3.微信小程序开发之录音机音频播放动画 (真机可用)
4.微信小程序开发之麦克风动画帧动画放大淡出

注释写了一些,凑合这看吧.有不对的地方,
欢迎批评!
上代码:
1.index.wxml

<view class="container-out"><view class="circle" wx:for="{{circleList}}" style="top:{{item.topCircle}}rpx;left:{{item.leftCircle}}rpx;background-color: {{(index%2==0)?colorCircleFirst:colorCircleSecond}};"></view><view class="container-in"><view class="content-out" wx:for="{{awardList}}" style="top:{{item.topAward}}rpx;left:{{item.leftAward}}rpx;background-color: {{(index==indexSelect)?colorAwardSelect:colorAwardDefault}};"><image class="award-image" src="{{item.imageAward}}"></image></view><view class="start-btn" bindtap="startGame" style=" background-color:{{isRunning?'#e7930a':'#ffe400'}}">START</view></view>
</view>

2.index.wxss

.container-out {height: 600rpx;width: 650rpx;background-color: #b136b9;margin: 100rpx auto;border-radius: 40rpx;box-shadow: 0 10px 0 #871a8e;position: relative;
}.container-in {width: 580rpx;height: 530rpx;background-color: #871a8e;border-radius: 40rpx;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;
}/**小圆球
box-shadow: inset 3px 3px 3px #fff2af;*/.circle {position: absolute;display: block;border-radius: 50%;height: 20rpx;width: 20rpx;
}.content-out {position: absolute;height: 150rpx;width: 166.6666rpx;background-color: #f5f0fc;border-radius: 15rpx;box-shadow: 0 5px 0 #d87fde;
}/**居中 加粗*/.start-btn {position: absolute;margin: auto;top: 0;left: 0;bottom: 0;right: 0;border-radius: 15rpx;height: 150rpx;width: 166.6666rpx;background-color: #ffe400;box-shadow: 0 5px 0 #e7930a;color: #f6251e;text-align: center;font-size: 55rpx;font-weight: bolder;line-height: 150rpx;
}.award-image {position: absolute;margin: auto;top: 0;left: 0;bottom: 0;right: 0;height: 140rpx;width: 130rpx;
}

3.index.js

Page({data: {circleList: [],//圆点数组awardList: [],//奖品数组colorCircleFirst: '#FFDF2F',//圆点颜色1colorCircleSecond: '#FE4D32',//圆点颜色2colorAwardDefault: '#F5F0FC',//奖品默认颜色colorAwardSelect: '#ffe400',//奖品选中颜色indexSelect: 0,//被选中的奖品indexisRunning: 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 = 15leftCircle = 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) returnthis.setData({isRunning: true})var _this = this;var indexSelect = 0var 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))}
})

demo代码下载

CSDN微信小程序开发专栏
我的博客,欢迎批评!

微信小程序开发之大转盘仿天猫超市抽奖相关推荐

010 - 微信小程序开发之大转盘仿天猫超市抽奖
天猫超市翻牌的转盘经常用,以前做Android,没啥想法,现在尝试微信小程序,看到别人家APP里有啥好玩的,就想去做一个. 上GIF看效果: 简要的说一下. 1.外面一圈闪烁的小球是用js控制的样式. ...
微信小程序开发之大转盘抽奖
上代码: 1.index.wxml <view class="container-out"><view class="circle" wx:f ...
微信小程序项目实例——幸运大转盘
微信小程序项目实例--幸运大转盘文章目录微信小程序项目实例--幸运大转盘一.项目展示二.抽奖页三.领奖页文末:项目代码项目代码见文字底部,点赞关注有惊喜一.项目展示幸运大转盘是一个简 ...
01.微信小程序开发之环境搭建
在开发之前你要有微信开发者工具,下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 这里我要假设大家有已经拿到了 ...
微信小程序开源源码，仿淘宝、京东、今日头条等
wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...
《微信小程序》微信小程序开发实例
wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...
微信小程序开源源码，仿京东、网易云、拼多多等
wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...
微信小程序源码大集004---小程序实现大转盘仿天猫抽奖跑马灯效果（有图有源码）
10天零基础入门微信小程序开发,只讲干货,实战入门,10天开发属于自己的上线小程序. 10天零基础入门小程序系列教程基本实现功能 1,小程序仿天猫超市抽奖大转盘 2,跑马灯效果 3,开始抽奖,抽奖完 ...
微信小程序开发-仿今日头条（二）
该仿今日头条的文章系列如下: 微信小程序-仿今日头条客户端微信小程序开发-仿今日头条(二) 转载请标明:https://blog.csdn.net/yangjianbo456/article/det ...

微信小程序开发之大转盘仿天猫超市抽奖

demo代码下载

微信小程序开发之大转盘仿天猫超市抽奖相关推荐

最新文章

热门文章

微信小程序开发之大转盘 仿天猫超市抽奖

demo代码下载

微信小程序开发之大转盘 仿天猫超市抽奖相关推荐

最新文章

热门文章

微信小程序开发之大转盘仿天猫超市抽奖

微信小程序开发之大转盘仿天猫超市抽奖相关推荐