VUE 实现一个简易老虎机

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

简单分析下

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

先看看效果

html

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

js部分

1/**
2 * 金额依次为1.1 1.2 1.3 1.4 1.5
3 * **/ 
4let UL_BOXS = []
5export default {
6    name:'lhj',
7    data() {
8        return {
9            img: [],
10            liHeight: 0,
11            arr: [4,5,4],//中奖数组
12        }
13    },
14    created() {
15        this.setArr()
16    },
17    async mounted() {
18        let evenTransition = this.whichTransitionEvent()
19        await this.$nextTick()
20        // 获取 ul 3个 box
21        UL_BOXS = this.$refs.ul
22        // 计算每个 图片高度
23        let ulH = UL_BOXS[0].offsetHeight
24        // 我自己默认循环的 50个图片
25        this.liHeight = ulH / 50 
26        // 监听动画结束函数
27        UL_BOXS[2].addEventListener(evenTransition,rest,false)
28        let that = this
29        // 复位函数
30        function rest() {
31            for(let i = 0;i < that.arr.length;i++){
32                let y =  (that.arr[i] - 1) * that.liHeight
33                that.aniImg(y,i,0)
34                
35            }
36            alert('中奖下标'+JSON.stringify(that.arr))
37        }
38        
39    },
40    beforeDestroy() {
41        UL_BOXS = null
42    },
43    methods: {
44        async toStart() {
45            // 圈数
46            let loop = 3
47            // 一圈基础高度 奖品数*每个高度
48            let base = 5*this.liHeight
49            for(let i = 0;i < this.arr.length; i++){
50                let a = await this.delayPerform(i*100)
51                if( a == 1){
52                    let y = base*loop + (this.arr[i] - 1)*this.liHeight
53                    this.aniImg(y,i)
54                }
55            }
56        },
57        // 目标位置
58        aniImg(y,index,duration = 3000) {
59            UL_BOXS[index].style.transitionDuration = `${duration}ms`
60            UL_BOXS[index].style.transform = `translate(0px, -${y}px) translateZ(0px)`
61        },
62        // 设置重复数组
63        setArr() {
64            let arr = [1,2,3,4,5]
65            let img2 = []
66            for(let i = 0 ;i<10;i++){
67                img2.push(...arr)
68            }
69            this.img = Object.freeze(img2)
70        },
71        // 改变中奖位置
72        toChang() {
73            this.arr = [1,1,1]
74        },
75        // 延时函数
76        delayPerform(delay = 200) {
77            return new Promise((resolve,reject) => {
78                setTimeout(()=>{
79                    resolve(1)
80                },delay)
81            })
82        },
83        // 动画兼容
84        whichTransitionEvent(){
85            let el = document.createElement('span'),
86            transitions = {
87                'transition':'transitionend',
88                'OTransition':'oTransitionEnd',
89                'MozTransition':'transitionend',
90                'WebkitTransition':'webkitTransitionEnd'
91            };
92            for(let t in transitions){
93                if( el.style[t] !== undefined ){
94                    return transitions[t];
95                }
96            }
97            el = null;
98        }
99    }
100}
101</script>

js部分主要做了几件事

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

总结

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