vue实现轮播话术效果

需求需要一个这样的效果

 

 轮播话术，首先想到的是操作dom方法

 mounted() {
　　//获取div元素，定位轮播位置
    const parentDiv = this.$refs.shufflingText
    for (let i = 0; i < 100; i++) {
      this.shuffling(parentDiv, '恭喜您获得了XX奖品' + i, i)
    }
  },


 shuffling(parentDiv, text, i) {
      let left = i * 200 + 400
      let div = document.createElement('div')
      div.style.position = 'absolute'
      div.style.width = '200px'
      div.style.height = '30px'
      // div.style.backgroundImage = 'url("/static/img/tooltip.png")'
      div.innerHTML = text
      div.style.top = this.stochastic() + 'px'
      // console.log(div.style.top)
      div.style.left = left + 'px'
      div.classList.add('shufText')
      parentDiv.appendChild(div)
      // debugger
      let timer = setInterval(() => {
        left--
        div.style.left = left + 'px'
        if (left < -200) {
          parentDiv.removeChild(div) //当弹幕移动出了视频时，销毁该元素
          clearInterval(timer) //关闭计时器
        }
      }, 20)
      this.timers.push(timer)
    },

该方法实在太low，后面直接使用vue数据驱动的原理

<!-- 轮播图话术 -->
      <div class="shufflingText" ref="shufflingText">
        <div v-for="(item,index) in shuffList" :key="index" :class="['commonText',index%2===1?'shufText':'shufText2']">{{item.message}}</div>
      </div>

原理是遍历数组，每隔一段时间push一条数据到shuffList

 startShuffList() {
      this.timer2 = setTimeout(() => {
        if (this.index < this.shuffList2.length) {
          this.shuffList.push(this.shuffList2[this.index])
          this.index++
        } else {
          this.index = 0
        }
        this.startShuffList()
      }, 2000)
    },

此时实现轮播效果的是css

 .shufflingText {
    position: absolute;
    z-index: 100;
    top: 2.38rem;
    width: 100vw;
    height: 0.5rem;
    .commonText {
      position: absolute;
      font-size: 0.12rem;
      padding: 0.03rem 0.1rem;
      color: #fff;
      // height: 0.06rem;
      // line-height: 0.6rem;
      background: rgba(0, 0, 0, 0.4);
      border-radius: 0.3rem;
      padding-left: 0.05rem;
      animation: barrage 10s linear 0s;
      animation-fill-mode: forwards;
      word-break: keep-all; /* 不换行 */
      white-space: nowrap; /* 不换行 */
      overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
      image {
        width: 48rpx;
        height: 48rpx;
        border-radius: 50%;
        margin-right: 10rpx;
        margin-top: 6rpx;
      }

      text {
        white-space: nowrap;
      }
    }
    .shufText {
      top: 0;
    }
    .shufText2 {
      top: 0.3rem;
    }
  }

 @keyframes barrage {
    from {
      left: 100%;
      transform: translateX(0);
    }

    to {
      left: -100%;
      transform: translateX(-100%);
      display: none;
    }
  }

end