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 相关文章推荐
js获取提交的字符串的字节数
Feb 09 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
Oct 11 Javascript
eclipse导入jquery包后报错的解决方法
Feb 17 Javascript
JavaScript 作用域链解析
Nov 13 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
Sep 27 Javascript
Vue2 使用 Echarts 创建图表实例代码
May 18 Javascript
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
浅谈Vue.js 1.x 和 2.x 实例的生命周期
Jul 25 Javascript
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
JS实现的缓冲运动效果示例
Apr 30 Javascript
从零开始搭建webpack+react开发环境的详细步骤
May 18 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
Sep 12 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
PHP5中新增stdClass 内部保留类
2011/06/13 PHP
php array的学习笔记
2012/05/10 PHP
通过缓存数据库结果提高PHP性能的原理介绍
2012/09/05 PHP
CodeIgniter配置之autoload.php自动加载用法分析
2016/01/20 PHP
Yii中CArrayDataProvider和CActiveDataProvider区别实例分析
2016/03/02 PHP
php结合mysql与mysqli扩展处理事务的方法
2016/06/29 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
thinkPHP5.1框架路由::get、post请求简单用法示例
2019/05/06 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
2007/03/10 Javascript
JavaScript 学习笔记(十五)
2010/01/28 Javascript
中国地区三级联动下拉菜单效果分析
2012/11/15 Javascript
利用js实现选项卡的特别效果的实例
2013/03/03 Javascript
JavaScript加强之自定义event事件
2013/09/21 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
2020/09/12 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
2015/03/03 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
2016/08/11 Javascript
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
vue-router 组件复用问题详解
2018/01/22 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
2018/01/31 Javascript
详解创建自定义的Angular Schematics
2018/06/06 Javascript
JS实现根据指定值删除数组中的元素操作示例
2018/08/02 Javascript
小程序实现自定义导航栏适配完美版
2019/04/02 Javascript
vue读取本地的excel文件并显示在网页上方法示例
2019/05/29 Javascript
Python 常用string函数详解
2016/05/30 Python
Win7下Python与Tensorflow-CPU版开发环境的安装与配置过程
2018/01/04 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
在家更换处方镜片:Lensabl
2019/05/01 全球购物
String和StringBuffer的区别
2015/08/13 面试题
电子信息专业自荐书
2014/02/04 职场文书
历史博物馆观后感
2015/06/05 职场文书
《水上飞机》教学反思
2016/02/20 职场文书
PostgreSQL解析URL的方法
2021/08/02 PostgreSQL
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android
php将xml转化对象的实例详解
2021/11/17 PHP