微信小程序独家秘笈之抽奖大转盘
一、前期准备工作
软件环境:微信开发者工具
官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
1、基本需求。
- 实现用户自定奖品列表
- 带动画(动画可做参靠,个人要是觉得不好看可以自定义动画)
- 实现抽奖功能
2、案例目录结构
二、程序实现具体步骤
1.index.wxml代码
<!--index.wxml-->
<view class="container-out">
<view
class="circle" wx:for="{{circleList}}" wx:key=""
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}}" wx:key="" 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'}}">开始</view>
</view>
</view>
2.index.wxss代码
/**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;
}
3.index.js逻辑代码
a.部分的功能实现-圆点闪烁
//圆点闪烁
setInterval(function () {
if (_this.data.colorCircleFirst == '#FFDF2F') {
_this.setData({
colorCircleFirst: '#FE4D32',
colorCircleSecond: '#FFDF2F',
})
} else {
_this.setData({
colorCircleFirst: '#FFDF2F',
colorCircleSecond: '#FE4D32',
})
}
}, 500)//设置圆点闪烁的效果
b.部分功能实现-抽奖逻辑
//开始抽奖
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))
}
三、案例运行效果图
四、总结与备注
总结:如何打造一个爆款小程序?
1、首先要做的就是结合自身情况思考你的产品或者服务,到底适不适合做小程序,是否符合小程序“用完即走”的“轻”概念。
2、其次想清楚你想吸引的用户群,分析用户群的特性和存在的痛点。
3、最后充分利用小程序现有的功能和规则,做好营销推广工作。微信小程序独家秘笈之抽奖大转盘
注:本文著作权归作者,由demo大师代发,拒绝转载,转载需要作者授权
微信小程序独家秘笈之抽奖大转盘的更多相关文章
- 微信小程序独家秘笈之左滑删除
代码地址如下:http://www.demodashi.com/demo/14056.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 微信小程序实例-摇一摇抽奖
概述 前面我们讲了如何开始微信小程序搭建和一些组件的介绍.微信小组件和微信小程序入门 微信小程序目录 为了更好的理解小程序和小程序开发,我们首先来看一下项目的目录. 首先看下根目录下的app.json ...
- 微信小程序导航:官方工具+精品教程+DEMO集合(1月7更新)
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug ...
- 微信小程序学习指南
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- 微信小程序资源整理
微信小程序相关的文档.教程.开源项目等资源的整理,以便于开发学习使用. —— —— 收录仅作个人学习使用,涉及侵权行为及时联系: maple_6392@163.com 项目地址:GitHub | 码云 ...
- 微信小程序 - 生命周期 - 参数传递
现在WEB开发门槛越来越高,不想java 会了就可以有工作,前端不行 ,不仅JavaScript要求不低,基础的HTML+CSS还要扎实,jquery也是必须要会,现在的前端框架 Vue Ng R ...
- 微信小程序开源
| UI组件 | | | | | | | | | weui-wxss ★1873 - 同微信原生视觉体验一致的基础样式库 | | | | | | zanui-weapp ★794 - 好用易扩展的小程 ...
- 微信小程序开发资源整理
有兴趣学习微信小程序开发的可以关注简书专题 微信小程序开发 由于微信已经开发文档和开发工具了,所以下面的内容用处不大了. 具体参考:http://mp.weixin.qq.com/wiki/ 这篇文章 ...
- 微信小程序多宫格抽奖
最近闲来无事,做了一个多宫格抽奖的例子,有什么需要改进或者错误的地方,请留言,谢谢 首先看效果 思路是先让其转动2圈多,然后再进行抽奖,格子运动用的是setTimeout,让其运行的时间间隔不一样,然 ...
随机推荐
- remotepath != null 与 !TextUtils.isEmpty(remotepath) 的差别
remotepath != null 与 !TextUtils.isEmpty(remotepath) 的差别 !TextUtils.isEmpty(remotepath) 与 remo ...
- visio 画类图时 方法里如何加参数
鼠标双击类(打开属性对话框)-->(类别)操作-->属性-->(类别)参数-->(添加参数)
- 开篇-QT完全手册
嵌入式工具Qt的安装与使用 摘要 Qt是Trolltech公司的一个产品.Trolltech是挪威的一家软件公司,主要开 发两种产品:一种是跨平台应用程序界面框架:另外一种就是提供给做嵌入式Linux ...
- Objective-C:在类中设置不同协议
在下面的代码中,设置了两种不同的协议规则:一种是老师对学生设置的协议:即老师发出命令后,学生站起来.回答问题.坐下; 另一种是我对学生设置的协议:即学生按照我的协议中的初始化函数去初始化一个整数. / ...
- 解决:HTTP 错误 404.2 - Not Found. 由于 Web 服务器上的“ISAPI 和 CGI 限制”列表设置,无法提供您请求的页面
错误重现: 在发布网站的过程中,虽然不是第一次发布了,但是还是遇到了很多的问题.为了以后可以轻松解决此类问题还是积累下来比较好. 问题:HTTP 错误 404.2 - Not Found. 由于 We ...
- chromium中的性能优化工具syzyProf
函数性能分析工具SyzyProf 我先开始介绍SyzyProf.这个工具可以捕获每个线程调用每个函数执行的时间,然后把结果生成一个KCacheGrind能够识别的数据格式文件,然后通过KCacheGr ...
- 掌握Sed命令
带书签PDF版,喜欢的话,欢迎多提意见和建议,你的支持是血蝙蝠最大的前进动力! http://download.csdn.net/detail/challenge_c_plusplus/6480007 ...
- js常用的事件对象
事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event. ...
- OpenSSL 中 RSA 加密解密实现源代码分析
1.RSA 公钥和私钥的组成.以及加密和解密的公式: 2.模指数运算: 先做指数运算,再做模运算.如 5^3 mod 7 = 125 mod 7 = 6 3.RSA加密算法流程: 选择一对不同的.而且 ...
- Linux上磁盘挂载
Linux磁盘挂载 一. 磁盘分区 在终端输入fdisk –l 命令查看整个系统的分区情况. 能够看到另一个32G的/dev/vdb磁盘没有挂载使用 watermark/2/text/aHR0c ...