Vue 幸运大转盘实现思路详解


Posted in Javascript onMay 06, 2019

转盘抽奖主要有两种,指针转动和转盘转动,个人觉得转盘转动比较好看点,指针转动看着头晕,转盘转动时指针是在转盘的中间位置,这里要用到css的transform属性和transition属性,这两个因为不常用最好是上网查查,用法和功能。
  在html部分

<div id="wheel_surf">
   <div class="wheel_surf_title">幸运大转盘</div>
    <div class="lucky-wheel">
       <div class="wheel-main">
         <div class="wheel-pointer-box">
             <div class="wheel-pointer" @click="rotate_handle()" :style="{transform:rotate_angle_pointer,transition:rotate_transition_pointer}"></div>
          </div>       
          <div class="wheel-bg" :style="{transform:rotate_angle,transition:rotate_transition}">         
             <div class="prize-list">
                <div class="prize-item" v-for="(item,index) in prize_list" :key="index">
                    <div class="prize-pic" v-if="item.icon">
                        <img :src="item.icon" />
                    </div>
                    <div class="prize-type">
{{item.name}}</div>
                   </div>
                </div>
             </div>
          </div>
        </div>
        <div v-transfer-dom>
          <x-dialog v-model="showHideOnBlur" class="dialog-demo wheel_dialog" hide-on-blur>
            <div class="img-box">
              <div v-show="val == 7" class="noactive">
                <p>谢谢参与!祝您下次好运</p>
              </div>
              <div v-show="val !== 7">
                <p>恭喜你</p>
                <img :src="imgActive" />
                <p>{{item.rewardDesc}}</p> // 获奖返回值
              </div>
            </div>
            <div @click="showHideOnBlur=false">
              <span class="vux-close"></span>
            </div>
          </x-dialog>
        </div>
      </div>

总结

以上所述是小编给大家介绍的Vue 幸运大转盘实现思路详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
jQuery.Autocomplete实现自动完成功能(详解)
Jul 13 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
Aug 02 Javascript
Javascript毫秒数用法实例
Feb 05 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
Oct 28 Javascript
javascript用正则表达式过滤空格的实现代码
Jun 14 Javascript
javascript实现无法关闭的弹框
Nov 27 Javascript
微信小程序表单验证错误提示效果
May 19 Javascript
webpack 单独打包指定JS文件的方法
Feb 22 Javascript
Vuex 模块化使用详解
Jul 31 Javascript
JS实现简单省市二级联动
Nov 27 Javascript
Element Carousel 走马灯的具体实现
Jul 26 Javascript
使用Ajax实现进度条的绘制
Apr 07 Javascript
Vue运用transition实现过渡动画
May 06 #Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 #Javascript
vue路由跳转传参数的方法
May 06 #Javascript
如何获取vue单文件自身源码路径
May 06 #Javascript
详解vue-cli中使用rem,vue自适应
May 06 #Javascript
用Vue编写抽象组件的方法
May 06 #Javascript
JS解惑之Object中的key是有序的么
May 06 #Javascript
You might like
php的urlencode()URL编码函数浅析
2011/08/09 PHP
PHP运行模式的深入理解
2013/06/03 PHP
浅析PHP原理之变量分离/引用(Variables Separation)
2013/08/09 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
PHP数组常用函数实例小结
2018/08/20 PHP
window.onbeforeunload方法在IE下无法正常工作的解决办法
2010/01/23 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
javascript实现表格增删改操作实例详解
2015/05/15 Javascript
Jquery日历插件制作简单日历
2015/10/28 Javascript
jquery实现横向图片轮播特效代码分享
2015/11/19 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
2016/02/03 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
2016/03/25 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
vue v-model表单控件绑定详解
2017/05/17 Javascript
JS实现简单短信验证码界面
2017/08/07 Javascript
JS库之Three.js 简易入门教程(详解之一)
2017/09/13 Javascript
jquery ztree实现右键收藏功能
2017/11/20 jQuery
详解Nodejs mongoose
2018/06/10 NodeJs
Vue项目History模式404问题解决方法
2018/10/31 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
[04:16]DOTA2全国高校联赛16强抽签
2018/05/02 DOTA
python的迭代器与生成器实例详解
2014/07/16 Python
python如何在终端里面显示一张图片
2016/08/17 Python
Pycharm学习教程(3) 代码运行调试
2017/05/03 Python
Python简单生成8位随机密码的方法
2017/05/24 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
python Event事件、进程池与线程池、协程解析
2019/10/25 Python
python logging模块的使用详解
2020/10/23 Python
详解CSS3+JS完美实现放大镜模式
2020/12/03 HTML / CSS
荷兰在线体育用品商店:Avantisport.nl
2018/07/04 全球购物
迪斯尼假期(欧洲、中东及非洲):Disney Holidays EMEA
2021/02/15 全球购物
2016年党建工作简报
2015/11/26 职场文书
2016党员干部廉洁自律心得体会
2016/01/13 职场文书