VUE 实现一个简易老虎机

请叫我海龟先生 等级 398 1 0

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

简单分析下

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. 动画结束,滚动距离复位。

总结

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

收藏
评论区

相关推荐

【官宣】Vue 3.0 发布!
Vue 团队于 2020 年 9 月 18 日晚 11 点半发布了 Vue 3.0 版本,我们连夜对 Release 进行了翻译。由于时间仓促,文中如有翻译不当的地方还望提出。如有侵权,请联系删帖。以下为译文正文。 原文:https://github.com/vuejs/vuenext/releases 作者:Vue 团队 译文:https://zh
Android webview 与 js(Vue) 交互
js 与原生交互分为两种情况:js 调用原生方法,原生调用 js 方法。 本文将对这两种情况分别讲解,H5 端用 vue 实现。 一、前期准备(Vue项目准备) 本文的 H5 端用Vue 实现,所以在正式开始前先把 Vue 项目环境准备好。 项目写好后,执行 npm run serve 命令启动项目,启动成功后会在命令
Vue 组件通信方式及其应用场景总结
前言 相信实际项目中用过vue的同学,一定对vue中父子组件之间的通信并不陌生,vue中采用良好的数据通讯方式,避免组件通信带来的困扰。今天笔者和大家一起分享vue父子组件之间的通信方式,优缺点,及其实际工作中的应用场景 首先我们带着这些问题去思考 1 vue中到底有多少种父子组件通信方式? 2 vue中那种父子组件最佳通信方式是什么? 3
基于Vue实现一个有点意思的拼拼乐小游戏
笔者去年曾写过一个类似的拼拼乐小游戏,技术栈采用自己的Xuery框架和原生javascript实现的,脚手架采用gulp来实现,为了满足对vue的需求,笔者再次使用vue生态将其重构,脚手架采用比较火的vuecli。 前言 为了加深大家对vue的了解和vue项目实战,笔者采用vue生态来重构此项目,方便大家学习和探索。技术栈如下: vuecli4
了解Vuex状态管理模式
1 Vuex是什么呢?它是Vue的状态管理模式,在使用vue的时候,需要在vue中各个组件之间传递值是很痛苦的,在vue中我们可以使用vuex来保存我们需要管理的状态值,值一旦被改变,所有引用该值的地方就会自动更新。是不是很方便,很好用呢? vuex是专门为vue.js设计的状态管理模式,集中式存储和管理应用程序中所有组件的状态,vuex也集成了vue的
史上最全前端面试题(但是没有答案 自己百度 手动狗头!)
Vue面试题 生命周期函数面试题 1.什么是 vue 生命周期 2.vue生命周期的作用是什么 3.第一次页面加载会触发哪几个钩子 4.简述每个周期具体适合哪些场景 5.created和mounted的区别 6.vue获取数据在哪个周期函数 7.请详细说下你对vue生命周期的理解? vue路由面试题 1.mvvm 框架是什么? 2.vuerout
Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理、数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。 5.1. Vue实例初始
前端技术栈:5分钟入门VUE+Element UI
目录前端技术栈:5分钟入门VUEElement UI前言2021了,VUE都出3.0了,还不开始学习VUE?那不是一个全栈攻城狮的自我修养,虽然VUE出3.0了,但是入门还是建议VUE2.0 Element UI,毕竟3.0还要等养肥了在学,现在教程太少,学习2.0之后在学3.0也能更加理解为什么要这么去改进VUE是啥?简单来说就是
介绍 | Vue3中文文档
已经了解 Vue 2,只想了解 Vue 3 的新功能可以参阅 Vue.js 是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与以及各种 结合使用时
30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度)
30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度)(https://www.zhihu.com/people/huobodexiaobaiyang).css1cd9gw4{marginleft:.3em;}545 人赞同了该文章前言
Vue 3 计划放弃支持 IE11
Vue.js 作者尤雨溪就 Vue 3 支持 IE11 的计划提交了新提案。提案摘要:1. Vue 3 将不会支持 IE11 2. 原定投入 Vue 3 IE11 支持的精力将投入给 2.7,移植 3.x 兼容的新功能,包括: Composition API \<script setup\ 以及其它新的单文件组件特性
npm发布包以及更新包还有需要注意的几点问题(这里以发布vue插件为例)
前言在此之前,你需要去npm官网注册一个属于自己的账号,记住自己的账户名以及密码、邮箱,后面会用的到。第一步,安装webpack简易框架vue init webpacksimple marquee 这里会用到vue init 命令,如果你的cli版本是3或者以上,那么在此之前你需要安装vue/cliinit npm install g @vue
Vue 3.0 有哪些新特性值得我们提前了解
一、迎接 Vue 3.0 1\. 简介在这里插入图片描述Vue.js 作者兼核心开发者尤雨溪宣布 Vue 3.0 进入 Beta 阶段。 已合并所有计划内的 RFC 已实现所有被合并的 RFC Vue CLI 现在通过 vueclipluginvuenext 提供了实验性支持 2\. 新特性重点关注: 更快更省
Vue 从安装到创建项目
1.安装Node可以直接在官网中下载安装默认自动安装Node和NPM(Node Package Manager) 完成后检查安装版本:node v npm v2.安装webpack webpack全局安装npm install webpack g3.安装vue脚手架 全局安装脚手架3npm install @vue/cli g 备注
vue项目无配置文件解决方案
问题在开发vue项目时,需要重新设置项目的启动端口,发现项目目录中并没有相关的配置文件【config目录】vue脚手架版本【通过vue version查询】:@vue/cli 4.5.13解决方案在vue项目根目录下创建vue.config.js配置文件vue.config.jsmodule.exports devServer: d