这vue个抽奖轮盘不展示滚动效果呢（就是滚动时isActive没有效果，只有开始和结束是展示的）？

Z时代
2024-02-06
分类：IT

<li class="itemLi" 
            v-for="(item,index) in initData.awardConfigList" :key="index">
            <div class="startButton" v-if="index == 4" @click="onStart">-{{initData.conPoint}}积分</div>
            <img :src="item.imgUrl" v-if="index != 4" alt=""/>
            <div class="maskBox" v-if="item.isActive"></div>          </li>

indent : -1, //当前转动到哪个位置，起点位置 count : 0, //总共有多少个位置 timers : null, //setTimeout的ID，用clearTimeout清除 speed : 10, //初始转动速度 times : 0, //转动次数 cycle : 50, //转动基本次数：即至少需要转动多少次再进入抽奖环节

prize : -1, //中奖位置

  // 点击开始按钮
   onStart(){
      //判断是否注册用户
      if (this.initData.hasUser != "Y") return;
      //判断积分是否大于20，大于20允许抽奖
      if (this.userPoints < this.initData.conPoint) return;
      //click控制一次抽奖过程中不能重复点击抽奖按钮，后面的点击不响应
      if (this.isClick) return;
      // this.luckDrawSuccess("7");
      this.loadingShow = true;
      axiosH5Post('MWP_USER_MS_LOTTERYDRAW_003')
        .then((res) => {
          if (res.code == '200') {
            this.loadingShow = false;
            this.luckDrawSuccess(res.awardLevel);
            //处理积分
            this.hasPoints = res.hasPoints;
            this.awardName = res.awardName;
            this.openId = res.openId;
            this.beautilfulScenerykey = res.beautilfulScenerykey;
            this.recordId = res.recordId;
            this.isPhysical = res.isPhysical;
          } else {
           this.loadingShow = false;
           requestRemind(res.message);
          }
        })
       .catch((err) => {
         this.loadingShow = false;
         systemRemind(err);
        });
    },
    luckDrawSuccess(awardLevel) {
      const prizeMapping = {
        1: 5,
        2: 4,
        3: 0,
        4: 1,
        5: 2,
        6: 6,
        7: 7,
        8: 3,
      };
      this.prize = prizeMapping[parseInt(awardLevel)] || 0; // 默认值为0
      this.speed = 100;
      // 使用await等待roll函数执行完成
      this.roll();
    },
    //    抽奖
   roll() {
     this.timers  = setTimeout( () =>{
        this.times += 1;
        // 修正 this.index，确保在 0 到 9 之间循环
        this.indent = (this.times-1) % 9 ;
        // 在特定条件下跳过中奖位置
        if (this.times === 5) {
          this.indent = (this.indent + 1) % 9;
        }
        console.log(
          this.initData.awardConfigList,
          "当前圈数：" + this.times,
          "中奖的位置：" + this.prize,
          "当前滚动下标：" + this.indent,
          "this.initData.awardConfigList>>>>>"
        );
        if (this.times > this.cycle + 10 && this.prize == this.indent) {
          clearTimeout(this.timers);
          this.prize = -1;
          this.times = 0;
          setTimeout(() => this.winning(), 500); // 弹出中奖提示框
        } else {
          if (this.times < this.cycle) {
            this.speed -= 10;
          } else {
              if (
                this.times > this.cycle + 10 &&
                ((this.prize === 0 && this.indent === 7) || this.prize === this.indent + 1)
              ) {
                this.speed += 110;
              } else {
                this.speed += 20;
              }
            }
            if (this.speed < 40) {
              this.speed = 40;
            }
            // 清除之前的激活状态
            this.initData.awardConfigList.map(item => {
              this.$set(item,'isActive',false);
            });
            this.$set(this.initData.awardConfigList[this.indent],'isActive',true);// 设置当前项的激活状态
            // 使用回调函数方式等待指定时间后再次调用roll函数，实现滚动效果
            // this.timers = setTimeout(() => this.roll(), this.speed);
            this.roll();
          }
           console.log(this.initData.awardConfigList,"this.initData.awardConfigList[this.indent]》》》》》》》")
        }, this.speed );      },