VUE 实现一个简易老虎机

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

简单分析下

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

先看看效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C1VgiUjl-1655532786989)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d185ae1374584cf5a6808562bb8ab690~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image)]

html

 <div class="lhj_box" >
          // 这里直接 搞三组
          <div class="lhj_item" v-for="ite in 3" :key="ite"  >
           // ref 标识，到时候获取，用于计算高度