VUE 实现一个简易老虎机的项目实践

目录
  • 简单分析下
  • 先看看效果
  • html
  • js部分
  • 总结

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

简单分析下

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

先看看效果

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部分主要做了几件事

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

总结

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

到此这篇关于VUE 实现一个简易老虎机的项目实践的文章就介绍到这了,更多相关VUE 老虎机内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue实现简单转盘抽奖功能

    本文实例为大家分享了vue实现简单转盘抽奖的具体代码,供大家参考,具体内容如下 样式请大家忽略(自己调),主要看JS代码实现,点击按钮后调用start方法,判断是否在转动状态,如果没转动则调用go方法,go方法主要封装了一次性定时器,是个递归函数,调用go函数后即可实现抽奖转盘的效果了,详细代码如下: 注释清晰哦 <template>   <div class="home">     <button @click="start">

  • vue3实现抽奖模板设置

    本文实例为大家分享了vue3实现抽奖模板设置的具体方法,供大家参考,具体内容如下 效果图 代码 <template>   <div>     <h4>抽奖模板设置</h4>     <div class="container">       <ul class="ul-box">         <li           v-for="(item,index) in list&

  • VUE实现大转盘抽奖

    UI 老规矩,先看下静态UI,以便于有个图像概念 初始参考各值参考图 方案分析-参数配置 核心思路: 将指针和中奖区域划分两部分,目前常规的效果,控制中奖区域旋转,然后停在指针处,当然控制指针也可以,一套思路,dom结构也比较简单,唯一算是复杂点的就是中奖区域,但是如果你足够懒,像我一样,你可以传递一张图也可以,完全依赖远端数据: 关于旋转位置 每个移动位置应均分,360/个数 === 每个奖品所占据的位置,以本文为例8个奖品位置,每个区域应为45deg,每个指针中心位置应为±22.5deg(±

  • vue组件实现移动端九宫格转盘抽奖

    本文实例为大家分享了vue组件实现移动端九宫格转盘抽奖的具体代码,供大家参考,具体内容如下 vue-lucky-draw 移动端九宫格转盘抽奖vue组件,中奖的奖品数据由接口决定. 效果图 抽奖 因为中奖的结果是后台返回的,所以要考虑转盘的最终停下来的位置必须是在对应后台返回结果的奖品的位置,也就是要模拟出这个中奖的过程(所以所谓的抽奖都是骗人的,嘿嘿).先要写出移动的背景框对应的各个位置的css,然后动态切换class来使其呈现出转动效果.明白了过程就好写了. 中间的按钮用的是css3的ani

  • Vue组件实现数字滚动抽奖效果

    本文实例为大家分享了Vue组件实现数字滚动抽奖效果的具体代码,供大家参考,具体内容如下 可调整数字滚动速度,可指定开奖延迟时间,可指定开奖数字,按个人需求自行改动(录了个效果供参考,临时找的录屏,表介意)不一一精简了 组件代码 <template>     <div class="info-span04" style="color: #333333;">         中奖号码:         <div style="ve

  • vue实现宫格轮转抽奖

    vue实现宫格轮转抽奖(类似穿越火线的xx轮回),供大家参考,具体内容如下 不做过多的解说,直接上代码啦.关键的代码都写了注释,很容易理解.直接复制即可使用! 另外css部分依赖 node-sass.sass-loader,没有安装的安装一下,已有的小伙伴直接跳过~~ "node-sass": "^4.12.0", "sass-loader": "^8.0.2", <template> <div class=

  • Vue.js实现大转盘抽奖总结及实现思路

    大家好!先上图看看本次案例的整体效果. 实现思路: Vue component实现大转盘组件,可以嵌套到任意要使用的页面. css3 transform控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩子函数watch监听抽奖结果的返回情况播放大转盘动画并给用户弹出中奖提示. 中奖结果弹窗,为抽奖组件服务. 实现步骤如下: 构建api奖品配置信息和抽奖接口,vuex全局存放奖品配置和中奖结果数据信息. api: export default { getPrizeList () { let priz

  • 基于VUE实现的九宫格抽奖功能

    先给大家展示下效果图: HTML代码: <template> <div class="luckDraw"> <title-bar :title="title"></title-bar> <div class="container"> <div class="turntable-wrapper"> <div class="luck-wrapp

  • vue简单实现转盘抽奖

    本文实例为大家分享了vue简单实现转盘抽奖的具体代码,供大家参考,具体内容如下 1.0 思路整理 转盘抽奖很常见,之前也没写过,现在有空来写写,分析如下: 1.1 转盘旋转 ----- 可以用 transform 的 rotate 来解决 1.2 旋转动画 ----- transition 过渡来处理 1.3 停留目标位置及中奖提示 ? ------ 通过控制旋转角度控制停留位置,中奖提示,考虑添加回调 1.1 开始行动 上面的思考,我们知道了大概要实现的步骤,首先我们搞张图片 这个圆盘有 10

  • vue实现大转盘抽奖功能

    本文实例为大家分享了vue实现大转盘抽奖的具体代码,供大家参考,具体内容如下 效果图如下 中奖提示 代码如下 <template>   <div class="dial" v-wechat-title="$route.meta.title">     <div class="times">抽奖次数{{LuckyClick}}</div>     <!-- 转盘包裹 -->     <

  • vue组件封装实现抽奖随机数

    本文实例为大家分享了vue组件封装实现抽奖随机数的具体代码,供大家参考,具体内容如下 一.子组件 <template>     <div>      <slot></slot>     </div> </template>     <script>      export default {          name:'countUp',          props:{              lastSymbol:

随机推荐