html 小程序九宫格抽奖,【小程序与公众号】微信小程序九宫格抽奖(抽奖完全随机)...
let timer;
let onDrawing = false; // 是否可进行抽奖标识,默认为false可进行抽奖
let drawIndex = 0; //抽奖过程KEY
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 关闭组件样式隔离
*/
options: {
styleIsolation: 'apply-shared'
},
/**
* 组件的初始数据
*/
data: {
// 奖品参数信息
prizeList: [
{ id: '001', index: 1, imgsrc: 'https://hbimg.huabanimg.com/18b925338313c77ee90c6a0a2f052a7988e10ce515ca7-T4bMZ0_fw658', prizeName: '谢谢参与' },
{ id: '002', index: 2, imgsrc: 'https://hbimg.huabanimg.com/2acfd641286f1a7e4050ca13e207c1d2fc2cbf5f12ca2-W5O1vm_fw658', prizeName: '金币 x20' },
{ id: '003', index: 3, imgsrc: 'https://hbimg.huabanimg.com/72138f8f82134a9099eaa02d5d81fa738519716021e4c-idXlQk_fw658', prizeName: '火箭 x1' },
{ id: '004', index: 4, imgsrc: 'https://hbimg.huabanimg.com/96e0a27d3a6b25dacd7157db6879b63be9e1addd126ac-sMVvOt_fw658', prizeName: '神秘礼盒 x1' },
{ id: '005', index: 5, imgsrc: 'https://hbimg.huabanimg.com/aa694a1e151f2cb8d8583eee9d1cbf0342b5577b953c-O0MFoR_fw658', prizeName: '水晶血瓶 x1' },
{ id: '006', index: 6, imgsrc: 'https://hbimg.huabanimg.com/2fe60709c9479b41ec3eef7fff1101f683b4ad89254af-HNdtDR_fw658', prizeName: '金币 x10' },
{ id: '007', index: 7, imgsrc: 'https://hbimg.huabanimg.com/407d1f6d9aa47e757994d9474dba7257c4c73bd11123a-5juBN1_fw658', prizeName: '水晶钻石 x5' },
{ id: '008', index: 8, imgsrc: 'https://hbimg.huabanimg.com/513f6f7d9f323e7cc3e252444237a84b52a98890c375-LGfXRi_fw658', prizeName: '水晶盒 x1' },
],
drawIndex: null, //抽奖过程KEY
prizeResult: null, //抽奖结果KEY
prizeName: null, //抽奖结果KEY对应的奖品名称
isShowLuck: false, // 是否显示奖品弹窗,默认false不显示
showAgain: false, //是否抽奖后显示再抽一次按钮
awardImage: '', // 弹窗展示的奖品照片
awardName:'', // 弹窗展示的奖品名字
},
/**
* 组件的方法列表
*/
methods: {
//抽奖操作
startDraw() {
if (onDrawing) {
return;
} else {
onDrawing = true;
}
clearInterval(timer);
timer = setInterval(()=>{
this.changePrize()
}, 80);
// 随机将品池
let random = Math.floor(Math.random() * this.data.prizeList.length)
let res = {
stutus: 1,
prizeResult: this.data.prizeList[random].index,
prizeName: this.data.prizeList[random].prizeName,
}
if (res.stutus == 1) {
setTimeout( ()=> {
clearInterval(timer);
timer = setInterval(()=>{
this.changePrize()
}, 200);
setTimeout( ()=> {
clearInterval(timer);
timer = setInterval(()=>{
this.changePrize()
}, 420);
setTimeout( () => {
this.setData({
prizeResult: res.prizeResult,
prizeName: res.prizeName,
});
}, 1000)
}, 1200)
}, 1800)
}
},
//抽奖过程奖品切换
changePrize() {
drawIndex++;
drawIndex = drawIndex > 8 ? 1 : drawIndex;
this.setData({
drawIndex: drawIndex
});
if (this.data.prizeResult == drawIndex) {
clearInterval(timer);
let currentAward = this.data.prizeList[this.data.prizeResult - 1]
this.setData({
showAgain: true,
isShowLuck: true,
awardImage: currentAward.imgsrc,
awardName: currentAward.prizeName
});
}
},
//点击再抽一次按钮
againBtn() {
onDrawing = false;
drawIndex = 0; //抽奖过程KEY
this.setData({
drawIndex: null, // 清空抽奖过程KEY
prizeResult: null, // 清空抽奖结果KEY
prizeName: null, // 清空抽奖结果KEY对应的奖品名称
showAgain: false, // 是否抽奖后显示再抽一次按钮
awardImage: '', // 清空奖品展示的图片
awardName: '' // 清空奖品的展示名称
});
},
// 关闭奖品弹簧
closePopup(){
this.setData({
isShowLuck: false
})
}
}
})
html 小程序九宫格抽奖,【小程序与公众号】微信小程序九宫格抽奖(抽奖完全随机)...相关推荐
- 微信公众号/微信小程序获取用户信息以及推送微信模版消息_MQ
微信公众号/微信小程序获取用户信息以及推送微信模版消息_MQ 一.获取用户信息 1.首先我们需要了解什么是微信用户的OpenID 在关注者与公众号产生消息交互后,公众号可获得关注者的OpenID(加密 ...
- 微信小程序再放新能力,公众号关联小程序的主体不再受限
声明:本文来自阿拉丁互动社区公众号(微信号ALaDingWeChat). 责编:陈秋歌,寻求报道或者投稿请发邮件至chenqg#csdn.net,或加微信:Rachel_qg. 了解更多前沿技术资讯, ...
- 微信公众号微信小程序申请出现的问题
由于之前把身份证号借给别人去申请过公众号,导致自己一直不知道为什么会出现 我知道个人身份证改得只能申请一个账号,但是一直不知道自己什么时候申请过,最后在网上招了很对东西,找到一个叫微信公众平台助手的东 ...
- h5商城模板_“公众号+小程序”才是做微信商城的正确方式
如果你问做商城是用公众号好还是小程序好,而回答你只做其中一个的,那么你可以不理他了! 我的答案是:公众号 + 小程序!必须一起做 小程序是一个趋势. 虽然小程序在微信里有着很多独立入口,但是有好些重要 ...
- 微信登录并拿手机号码(实战)目前仅公众号及小程序登录
公众号.小程序内用户登录(拿不到手机号码,官方没文档)以及Uni-app小程序内用户授权手机号码 1.公众号.小程序内用户登录 公众号登录重定向跨域问题 工具类 Java代码 演示 公众号 小程序 2 ...
- 微信小程序最新开发资源汇总,对学习微信小程序的新手有一定帮助
微信小程序最新开发资源汇总,希望给想学习或正在学习微信小程序开发的同学们带来一定帮助,汇总的小程序资源有点繁杂,各种类型的小程序demo都有,大家可以选择自己想要的demo进行下载学习.这些微信小程序 ...
- python开发跟淘宝有关联微_为什么微商和淘宝卖家不得不做公众号和小程序?
文/王爷 整理/叨叨 最近一个月,微信方面的动作比较多,尤其是有关微信小程序方面的动态,起码更新了4次.或许很多人还不知道什么是微信小程序,简单来说就是一个无需安装.即用即走的生长在微信上的一个应用. ...
- android源码大全 IOS游戏源代码打包下载 小游戏|视频教程 微信小程序源码带后台全套|公众号平台
不断更新中,下面是2017-12-22更新部分 IOS_源码及视频一小部分: 开发环境:Xcode 基于cocos2d的tweejump跳跃游戏ios经典游戏源码.rar https://pan.b ...
- 微信小程序页面上面的名字怎么改_微信小程序改名方法,小程序名称设置规范...
小程序名称设置规范 1.名称设置方法 1)小程序名称可以由中文.数字.英文.长度在4-30个字符之间,一个中文字等于2个字符. 2)公众号.小程序在微信公众平台上的名称是唯一的,且属于同一主体下,可以 ...
- 2019小程序没必要做了_2019微信小程序的发展前景怎么样?有必要开发微信小程序吗?...
微信小程序自从上线以来,一直很受大家的欢迎,当然微信小程序的功能也在不断的更新着,小程序共有七项主要功能,相信创业者对于这7种不同的功能,会迸发出更多的奇思妙想,那么通过功能我们可以思考一下,2019 ...
最新文章
- 有理有据!为什么String选择数字31作为hashCode方法乘子?
- 中国地区三级联动下拉菜单的实现
- CSS:CSS 在工程中改变——面向对象的CSS (OO CSS)
- 转的:SQL执行提高效率的多种方法
- 频频被关注的 AI,怎样才能用着舒心?
- 安装Go 1.9.2
- Python处理mongo结果中的ObjectId类型为字符串
- BZOJ1111 : [POI2007]四进制的天平Wag
- 利用阿里云提供的镜像快速更换本地的yum源
- 树莓派raspberrypi系统安装docker以及编译nginx和php镜像
- python snap7开发手册_python-snap7开发笔记
- Element el-cascader 级联选择器详解
- win10如何删除输入法_win10如何添加和删除输入法_win10系统添加和删除输入法的图文教程...
- VC浏览器的定制与扩展
- (九)统计学习方法 | 隐马尔可夫模型
- mac下 iterm+Zsh+Oh My Zsh+tmux 配置方案
- Java基础知识点总结(面试版)
- Agv、Rgv 车辆控制调度系统开发第一篇
- OpenCV C++开发 第一节:Win7开发环境搭建
- 重磅!GitHub突然宣布,对全球人免费开放全部核心功能