VUE 实现一个简易老虎机

请叫我海龟先生
• 阅读 2186

今天突然要做一个竖直滚动老虎机,可以设置中奖位置,以及中奖回调,然后再带点常规的滚动动画,还是有点意思,和之前的转盘抽奖有点类似,有兴趣可以看下。

简单分析下

UI,ui的话,就简单点,三个列表从下往上滚动,搞个框罩住 css的活,应该简单。 动画,老规矩,我们采用之前的方案,动态设置 css,可以搞定。 设置中奖位置,我们可以想传递一个数组,类似 [1,2,3] 这样,数组每一项代表停留位置,那我们就可以计算得css应该平移的距离值,至于动画结束后,还是参照以前的,监听动画结束就可以了。

先看看效果

VUE 实现一个简易老虎机

html


<div class="lhj_box" >
          // 这里直接 搞三组
          <div class="lhj_item" v-for="ite in 3" :key="ite"  >
           // ref 标识,到时候获取,用于计算高度
              <ul :class="`lhj_ul_${ite}`" ref="ul" >
                    <li v-for="(item,index) in img" :key="index"  >
                        <img :src="require(`../assets/images/l_gift${item}.png`)" alt="">
                    </li>
              </ul>
          </div>
</div>

js部分

/**
 * 金额依次为1.1 1.2 1.3 1.4 1.5
 * **/ 
let UL_BOXS = []
export default {
    name:'lhj',
    data() {
        return {
            img: [],
            liHeight: 0,
            arr: [4,5,4],//中奖数组
        }
    },
    created() {
        this.setArr()
    },
    async mounted() {
        let evenTransition = this.whichTransitionEvent()
        await this.$nextTick()
        // 获取 ul 3个 box
        UL_BOXS = this.$refs.ul
        // 计算每个 图片高度
        let ulH = UL_BOXS[0].offsetHeight
        // 我自己默认循环的 50个图片
        this.liHeight = ulH / 50 
        // 监听动画结束函数
        UL_BOXS[2].addEventListener(evenTransition,rest,false)
        let that = this
        // 复位函数
        function rest() {
            for(let i = 0;i < that.arr.length;i++){
                let y =  (that.arr[i] - 1) * that.liHeight
                that.aniImg(y,i,0)

            }
            alert('中奖下标'+JSON.stringify(that.arr))
        }

    },
    beforeDestroy() {
        UL_BOXS = null
    },
    methods: {
        async toStart() {
            // 圈数
            let loop = 3
            // 一圈基础高度 奖品数*每个高度
            let base = 5*this.liHeight
            for(let i = 0;i < this.arr.length; i++){
                let a = await this.delayPerform(i*100)
                if( a == 1){
                    let y = base*loop + (this.arr[i] - 1)*this.liHeight
                    this.aniImg(y,i)
                }
            }
        },
        // 目标位置
        aniImg(y,index,duration = 3000) {
            UL_BOXS[index].style.transitionDuration = `${duration}ms`
            UL_BOXS[index].style.transform = `translate(0px, -${y}px) translateZ(0px)`
        },
        // 设置重复数组
        setArr() {
            let arr = [1,2,3,4,5]
            let img2 = []
            for(let i = 0 ;i<10;i++){
                img2.push(...arr)
            }
            this.img = Object.freeze(img2)
        },
        // 改变中奖位置
        toChang() {
            this.arr = [1,1,1]
        },
        // 延时函数
        delayPerform(delay = 200) {
            return new Promise((resolve,reject) => {
                setTimeout(()=>{
                    resolve(1)
                },delay)
            })
        },
        // 动画兼容
        whichTransitionEvent(){
            let el = document.createElement('span'),
            transitions = {
                'transition':'transitionend',
                'OTransition':'oTransitionEnd',
                'MozTransition':'transitionend',
                'WebkitTransition':'webkitTransitionEnd'
            };
            for(let t in transitions){
                if( el.style[t] !== undefined ){
                    return transitions[t];
                }
            }
            el = null;
        }
    }
}
</script>

js部分主要做了几件事

  1. 我采用的是将列表循环多组出来,然后平移整个ul列表的方式来,所以先写一个重复数组的函数。
  2. 获取最后一个ul,并给其绑定监听动画结束的事件,中间当然也包括了计算每个滚动块的高度,方便后面计算停留位置。
  3. 编写一个延时函数,用来控制三个 ul 依次滚动,也会计算一些滚动的基本圈数。
  4. 动画结束,滚动距离复位。

总结

功能是实现了,具体完善的还是比较多,比如 事件的解绑,编写组件可以动态设置基本圈数,动画时间等。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Easter79 Easter79
3年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这