Vue.js实现大转盘抽奖总结及实现思路


Posted in Javascript onOctober 09, 2019

 大家好!先上图看看本次案例的整体效果。

Vue.js实现大转盘抽奖总结及实现思路

       实现思路:

Vue component实现大转盘组件,可以嵌套到任意要使用的页面。

css3 transform控制大转盘抽奖过程的动画效果。

抽奖组件内使用钩子函数watch监听抽奖结果的返回情况播放大转盘动画并给用户弹出中奖提示。

中奖结果弹窗,为抽奖组件服务。

       实现步骤如下:

 构建api奖品配置信息和抽奖接口,vuex全局存放奖品配置和中奖结果数据信息。

api:

export default {
 getPrizeList () {
  let prizeList = [
   {
    id: 1,
    name: '小米8',
    img: 'https://i1.mifile.cn/f/i/g/2015/cn-index/m8-140.png'
   },
   {
    id: 2,
    name: '小米电视',
    img: 'https://i1.mifile.cn/f/i/g/2015/TV4A-43QC.png'
   }, {
    id: 3,
    name: '小米平衡车',
    img: 'https://i1.mifile.cn/f/i/g/2015/cn-index/scooter-140!140x140.jpg'
   }, {
    id: 4,
    name: '小米耳机',
    img: 'https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140x140.jpg'
   }
  ]
  return prizeList
 },
 lottery () {
  return {
   id: 4,
   name: '小米耳机',
   img: 'https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140x140.jpg'
  }
 }
}

store:

import lotteryApi from '../../api/lottery.api.js'
const state = {
 prizeList: [],
 lotteryResult: {}
}
const getters = {
 prizeList: state => state.prizeList,
 lotteryResult: state => state.lotteryResult
}
const mutations = {
 SetPrizeList (state, { prizeList }) {
  state.prizeList = prizeList
 },
 SetLotteryResult (state, { lotteryResult }) {
  state.lotteryResult = lotteryResult
 }
}
const actions = {
 getPrizeList ({ commit }) {
  let result = lotteryApi.getPrizeList()
  commit('SetPrizeList', { prizeList: result })
 },
 lottery ({ commit }) {
  let result = lotteryApi.lottery()
  commit('SetLotteryResult', { lotteryResult: result })
 }
}

export default {
 state,
 getters,
 mutations,
 actions,
 namespaced: true
}

编写抽奖组件,为保证通用性,组件只负责播放抽奖结果。接收两个数据和一个方法,如下:

数据一:预置的奖品列表数据(轮播奖品需要)

数据二:抽奖结果,播放抽奖动画和弹出中奖结果需要

方法:抽奖动作,返回的抽奖结果数据即为数据二,响应式传递给组件

大概代码思路如下(仅供参考,不可运行)

<template>
 <section>
  <div class="lucky-item">
   <img src="//www.cnblogs.com/images/cnblogs_com/codeon/878827/o_backImage.jpg"
      alt>
   <div class="lucky-box">
    <img src="//www.cnblogs.com/images/cnblogs_com/codeon/878827/o_circle.jpg"
       alt>
    <ul id="wheel"
      class="wheel-list"
      :style="wheelStyle"
      :class="transition">
     <li v-for="(prize,index) in slotPrizes"
       :style="{transform: 'rotate('+index*45+'deg)'}"
       v-bind:key="index">
      <div class="fan-item"
         style="transform: rotate(15deg) skewY(45deg);"></div>
      <div class="lucky-prize">
       <h3>{{prize.name}}</h3>
      </div>
     </li>
    </ul>
    <div class="wheel-btn"
       @click="$emit('lottery')">
     <a>
      <img src="//images.cnblogs.com/cnblogs_com/codeon/878827/o_go.jpg"
         alt>
     </a>
    </div>
   </div>
   <prize-pop :prize="lotteryResult"
         v-if="showPrize"
         @closeLotteryPop="showPrize=false" />
  </div>
 </section>
</template>
<script>
import PrizePop from './common/prize-pop.vue'
export default {
 name: 'BigTurntable',
 data () {
  return {
   isStart: false,
   showPrize: false,
   wheelStyle: { 'transform': 'rotate(0deg)' },
   transition: 'transitionclear',
   playTurns: 5 // 默认先旋转5圈
  }
 },
 components: {
  PrizePop
 },
 props: {
  prizes: {
   type: Array,
   required: false
  },
  lotteryResult: {
   type: Object,
   default: () => { }
  }
 },
 computed: {
  slotPrizes () {
   var self = this
   console.log(self.prizes)
   let prizeList = []
   prizeList.push({ ...self.prizes[0], slotIndex: 1 })
   prizeList.push({ name: '谢谢参与', slotIndex: 2 })
   prizeList.push({ ...self.prizes[1], slotIndex: 3 })
   prizeList.push({ name: '谢谢参与', slotIndex: 4 })
   prizeList.push({ ...self.prizes[2], slotIndex: 5 })
   prizeList.push({ name: '谢谢参与', slotIndex: 6 })
   prizeList.push({ ...self.prizes[3], slotIndex: 7 })
   prizeList.push({ name: '谢谢参与', slotIndex: 8 })
   console.log(prizeList)
   return prizeList
  }
 },
 methods: {
  /**
   * 执行抽奖动画
   */
  playWheel (index) {
   
  },
   /**
   * 获取中奖结果所在奖品列表中的索引,以确定抽奖动画最终落在哪个奖品
  */
  getPrizeIndex (prizeId) {
  
  }
 },
 watch: {
/**
   * 监听抽奖结果,一旦有中奖信息就开始执行抽奖动画
   */
  lotteryResult (newVal, oldVal) {
   var self = this
   if (newVal.id && newVal.id > 0) {
    let index = self.getPrizeIndex(newVal.id)
    self.playWheel(index)
   }
  }
 }
}
</script>

弹出中奖结果组件,依附于抽奖组件,在上一步的执行抽奖结果动画结束后执行。

<template>
<div class="subject-pop" style="z-index: 10;" v-if="prize.id>0">
   <div class="subject-pop-mask"></div>
   <div class="subject-pop-box">
    <h3>恭喜您</h3>
    <p>
     <img :src="prize.img" alt>
    </p>
    <h4>获得
     <span></span>
     <span>{{prize.name}}</span>
    </h4>
    <div class="subject-pop-footer">
     <a href="javascript:;" rel="external nofollow" class="november-btn1" @click="closeLotteryEmit">知道了</a>
    </div>
   </div>
  </div>
</template>
<script>
export default {
 props: {
  prize: {
   type: Object,
   default: () => {
    return {
     id: 0
    }
   }
  }
 },
 methods: {
  closeLotteryEmit () {
   this.$emit('closeLotteryPop')
  }
 }
}
</script>

抽奖组件运用在需要使用的页面中,此页面需要为抽奖组件提前准备好预置奖品列表和中奖结果信息,并提供好抽奖方法供子组件(抽奖组件)触发,触发完更改抽奖结果响应式传入到抽奖组件中。

<template>
 <section>
  <div style="width:100%;text-align:center;margin:2rem 0;">您有一次抽奖机会,祝君好运~~~</div>
  <BigTurntable :prizes="prizeList"
         :lotteryResult="lotteryResult"
         @lottery="lottery" />
 </section>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import BigTurntable from '@/components/bigTurntable.vue'
export default {
 name: 'BigTurntableRun',
 created () {
  var self = this
  self.getPrizeList()
 },
 components: {
  BigTurntable
 },
 computed: {
  ...mapGetters({
   prizeList: 'lottery/prizeList',
   lotteryResult: 'lottery/lotteryResult'
  })
 },
 methods: {
  ...mapActions({
   getPrizeList: 'lottery/getPrizeList',
   lottery: 'lottery/lottery'
  })
 }
}
</script>

总结

以上所述是小编给大家介绍的Vue.js实现大转盘抽奖总结及实现思路,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
Oct 20 Javascript
Jquery的hover方法让鼠标经过li时背景变色
Sep 06 Javascript
浅析JQuery中的html(),text(),val()区别
Sep 01 Javascript
JavaScript实现点击单元格改变背景色的方法
Feb 12 Javascript
BOM系列第二篇之定时器requestAnimationFrame
Aug 17 Javascript
Bootstrap在线电子商务网站实战项目5
Oct 14 Javascript
Javascript ES6中数据类型Symbol的使用详解
May 02 Javascript
ES6 对象的新功能与解构赋值介绍
Feb 05 Javascript
浅析JavaScript异步代码优化
Mar 18 Javascript
js类的继承定义与用法分析
Jun 21 Javascript
vue选项卡切换登录方式小案例
Sep 27 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
Aug 05 Javascript
js基础之事件捕获与冒泡原理
Oct 09 #Javascript
微信内置浏览器图片查看器的代码实例
Oct 08 #Javascript
vue封装swiper代码实例解析
Oct 08 #Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 #jQuery
简单实现节流函数和防抖函数过程解析
Oct 08 #Javascript
微信小程序返回箭头跳转到指定页面实例解析
Oct 08 #Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
Oct 08 #Javascript
You might like
对text数据类型不支持代码页转换 从: 1252 到: 936
2011/04/23 PHP
PHP实现一维数组与二维数组去重功能示例
2018/05/24 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
Thinkphp 框架扩展之驱动扩展实例分析
2020/04/27 PHP
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
全面解析Angular中$Apply()及$Digest()的区别
2016/08/04 Javascript
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
Angular如何在应用初始化时运行代码详解
2018/06/11 Javascript
vue中axios的封装问题(简易版拦截,get,post)
2018/06/15 Javascript
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
JS实现十分钟倒计时代码实例
2018/10/18 Javascript
小程序实现左滑删除功能
2018/10/30 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
python实现决策树分类算法
2017/12/21 Python
python实现SOM算法
2018/02/23 Python
详解Python with/as使用说明
2018/12/13 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
django 微信网页授权登陆的实现
2019/07/30 Python
Python按照list dict key进行排序过程解析
2020/04/04 Python
如何将Pycharm中调整字体大小的方式设置为&quot;ctrl+鼠标滚轮上下滑&quot;
2020/11/17 Python
使用canvas对多图片拼合并导出图片的方法
2018/08/28 HTML / CSS
英国家居装饰品、户外家具和玻璃器皿购物网站:Rinkit.com
2019/11/04 全球购物
JAVA中的关键字有什么特点
2014/03/07 面试题
写出一个方法实现冒泡排序
2016/07/08 面试题
高二化学教学反思
2014/01/30 职场文书
群众路线剖析材料范文
2014/10/09 职场文书
四风问题专项整治工作情况报告
2014/10/28 职场文书
2014年房地产销售工作总结
2014/12/01 职场文书
毕业答辩开场白范文
2015/05/27 职场文书
中国梦党课学习心得体会
2016/01/05 职场文书
MySQL 使用SQL语句修改表名的实现
2021/04/07 MySQL
Python操作CSV格式文件的方法大全
2021/07/15 Python
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python
美元符号 $
2022/02/17 杂记