Vue<幸运抽奖-九宫格>

2021-01-19 14-32-53.gif

在线演示地址

实现思路:
1.要想实现从 特 - 1 - 2 - 3 - 4 - 5 - 6 - 7的方向执行，必须要在css内对标签进行position定位处理，以便于实现走马灯的效果
2.借助setTimeout计时器的方法，通过递归改变time来实现由快变慢的效果

配置参数:

      winner: 0, //指定获奖下标 specified为true时生效
      specified: true, //是否指定获奖结果，false时为随机
      list: [], //抽奖列表

      //----------------------上面的为主要参数--------------------------

      rollIndex: -1, //转动时的下标位置
      prize: -1, // 中奖位置
      count: 8, // 总共有多少个位置
      speed: 100, // 初始转动速度
      cycle: 50, // 转动基本次数：即至少需要转动多少次再进入抽奖环节
      rolling: false, //是否处于抽奖状态，防止多次点击
      timer: null, // 每次转动定时器
      times: 0, // 转动次数

     $lottery_w: 5rem; //每个奖品的宽高
     $lottery_h: 5rem; //每个奖品的宽高
     $lottery_margin: 0.2rem; //每个奖品的间隔

代码如下：