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 相关文章推荐
jquery.validate使用攻略 第二部
Jul 01 Javascript
jquery显示和隐藏div特效实例
Feb 27 Javascript
原生js实现autocomplete插件
Apr 14 Javascript
实现JavaScript的组成----BOM和DOM详解
May 18 Javascript
基于jQuery实现点击列表加载更多效果
May 31 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
May 26 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
Angularjs中的$apply及优化使用详解
Jul 02 Javascript
vue 根据数组中某一项的值进行排序的方法
Aug 30 Javascript
对angularJs中自定义指令replace的属性详解
Oct 09 Javascript
12 种使用Vue 的最佳做法
Mar 30 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
收音机指标测试方法及仪器
2021/03/01 无线电
Windows7下PHP开发环境安装配置图文方法
2010/05/20 PHP
php中return的用法实例分析
2015/02/28 PHP
PHP基于GD库的图像处理方法小结
2016/09/27 PHP
PHP模拟http请求的方法详解
2016/11/09 PHP
Yii2实现log输出到file及database的方法
2016/11/12 PHP
jQuery.extend 函数的详细用法
2012/06/27 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
2013/01/20 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
2013/01/23 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
JavaScript实现Iterator模式实例分析
2015/06/09 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
2016/03/30 Javascript
基于javascript实现全屏漂浮广告
2016/03/31 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
2017/06/28 jQuery
Vue 中批量下载文件并打包的示例代码
2017/11/20 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
vue.js中proxyTable 转发请求的实现方法
2018/09/20 Javascript
js实现弹窗猜数字游戏
2020/11/26 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
2021/02/20 Vue.js
零基础学Python(一)Python环境安装
2014/08/20 Python
Django 重写用户模型的实现
2019/07/29 Python
python selenium实现发送带附件的邮件代码实例
2019/12/10 Python
Python requests上传文件实现步骤
2020/09/15 Python
Python命令行参数定义及需要注意的地方
2020/11/30 Python
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
三个Unix的命令面试题
2015/04/12 面试题
材料加工硕士生求职信
2013/10/10 职场文书
学前教育毕业生自荐信
2013/10/29 职场文书
项目合作计划书
2014/01/09 职场文书
行政办公室岗位职责
2014/03/18 职场文书
作风建设演讲稿
2014/05/23 职场文书
土建工程师岗位职责
2014/06/10 职场文书
水利水电专业自荐信
2014/07/08 职场文书
导游词之青岛崂山
2019/12/27 职场文书