滚动屏 显示文案

html代码

<div class="main-box-broad-cast">
      <icon project="albumset" icon="horn" class="tag-horn" />
      <div class="main-box-broad-cast-text" ref="wrapBox" v-if="curIndex === 0">
        <div ref="innerBox" :style="`transform: translate3D(${leftX}px, 0, 0)`">
          分享快乐，点赞快乐！12月31日14:00、18:00准点时点赞量为前1-5名的图文发布者（不可重复获得哦）将获得手机、耳机、拍立得等惊喜大奖！
        </div>
      </div>
 </div>

data中：

leftX: 0,
ani: true,
 speed: 1,
 timer: null

mounted中

 setTimeout(() => {
        this.moveAni()
      }, 3000)

methods中

moveAni() {
      let wrapBoxWidth = this.$refs.wrapBox.clientWidth
      let innerBoxWidth = this.$refs.innerBox.clientWidth
      this.leftX = 0
      const render = () => {
        this.leftX -= this.speed
        if( this.leftX < -innerBoxWidth ) {
          innerBoxWidth = this.$refs.innerBox.clientWidth
          wrapBoxWidth = this.$refs.wrapBox.clientWidth
          this.leftX = wrapBoxWidth
        }
        this.timer = requestAnimationFrame(render)
      }
      render()

      this.$on('hook:beforeDestroy', () => {
        this.cancelAni()
      })
    },

跟methods同级别

cancelAni() {
    cancelAnimationFrame(this.timer)
  },