vue加js实现大转盘抽奖活动

1.写大转盘的页面，这里是我的整个页面的代码

},
created() {
this.ais = localStorage.getItem(‘ais’)
},
computed: {
classOption() {
return {
step: 0.5 //数值越大速度滚动越快，更多参数参考官网参数配置
// limitMoveNum: 2,// 开始无缝滚动的数据量
};
}
},
methods:{
ruleBtn() {
this.show = true
this.ruleshow = true
this.prizeshow = false
this.blockshow = true
this.aisshow = false
this.giftshow = false
this.myaisshow = false
},
prizeBtn() {
this.show = true
this.blockshow = true
this.prizeshow = true
this.ruleshow = false
this.aisshow = false
this.giftshow = false
this.myaisshow = false
},
gogift() {
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … query:this.route.query
})
},
close() {
this.show = false
},
goBack() {
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … query:this.route.query
})
},
record() {
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … query:this.route.query
})
},
startRotation() {

    // 如果还不可以转动if (!this.canBeRotated()) {return false;}// 开始转动// 先上锁this.isLocking = true;// 设置在哪里停下，应该与后台交互，这里随机抽取0~5// const index = Math.floor(Math.random() * this.prizeData.length);const index = 3;// 成功后次数减少一次this.num--;this.prizeIndex = index;// 告诉子组件，开始转动了this.$refs.roundTurntable.rotate(index);},// 已经转动完转盘触发的函数endRotation() {// 提示中奖this.giftshow = truethis.show = truethis.ruleshow = falsethis.prizeshow = falsethis.blockshow = falsethis.myaisshow = falsethis.name = this.prizeData[this.prizeIndex].prizeName// alert(`恭喜您获奖啦,您的奖品是：${this.prizeData[this.prizeIndex].prizeName}`);// 解锁this.isLocking = false;},// 判断是否可以转动canBeRotated() {if (this.num <= 0) {// alert('已经木有次数了！');this.aisshow = truereturn false;}if (this.isLocking) {return false;}return true;},

},
}

roundTurntable.vue大转盘子组件

当前浏览器版本过低，请使用其他浏览器尝试

vue加js实现大转盘抽奖活动相关推荐

js实现大转盘抽奖活动
一.建立html页面 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
vue js 幸运大转盘
vue js 幸运大转盘在写一个 vue 项目时,用到了转盘抽奖,发现网上没有现成的 vue 案例,于是将自己写的分享出来,用作交流使用效果流程页面created时,加载奖品列表,根据和后台预 ...
微信公众号大转盘抽奖活动链接怎么添加
很多微信公众号都会有抽奖活动,想要给自己的公众号添加大转盘抽奖活动的链接,希望可以帮助大家在微信公众号中举办起抽奖活动,活跃起自己的粉丝,该怎么添加呢?下面我们就来看看详细的教程. 微信公众号大转盘抽 ...
qq开放平台之站内应用-php抽奖大转盘,jQuery实现大转盘抽奖活动仿QQ音乐代码分享...
jQuery实现大转盘抽奖活动仿QQ音乐抽奖特效源码是一款基于jQuery,点击大转盘开始抽奖可抽到绿钻的仿qq音乐抽奖转盘的代码. 运行效果图:--------------------------- ...
html做一个抽奖游戏,js实现大转盘抽奖游戏实例
/p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> js抽奖 td{width:50px;he ...
大转盘抽奖活动免费创建
1. 微信搜索小程序"多盈抽奖助手". 2.点击立即创建 3.选择标准版免费创建 4.填写活动相关参数,支持实名抽奖,口令抽奖,限制地域抽奖,自定义主题,门店核销等. 5.创建好之 ...
vue移动端大转盘抽奖
vue移动端幸运大转盘抽奖要求: 点击开始后转盘开始转动,5秒后转盘逐渐减速并停止,最终位置随机定位在10个奖项中的某一个,并弹出中奖信息 <template><div class ...
python 写一个幸运大转盘抽奖脚本
大转盘抽奖活动 def get_value(): import random list1 = {"id": 1, "name": "1000元&quo ...
小程序的大转盘活动怎么做？
日常生活中最常见的抽奖活动莫过于大转盘抽奖了吧,无论线上线下.大转盘抽奖活动具有多样性.并可开展基于粘性维护的活动:跨界营销.会员积分.互动抽奖.红包.优惠等线上线下活动,并能通过连续扫码.会员积分. ...

vue加js实现大转盘抽奖活动

vue加js实现大转盘抽奖活动相关推荐

最新文章

热门文章