vue实现文字滚动播放效果

忘是亡心i 2023-01-17 02:26 220阅读 0赞

[原博地址][Link 1]，亲测此方法有效！！！

## 效果图： ##

![在这里插入图片描述][2021042615573066.gif_pic_center]

## 实现方式： ##

<div class="marquee-wrap">
        <ul class="marquee-list" :class="{ 'animate-up': animateUp}">
          <li v-for="(item, index) in listData" :key="index">{
       {item}}</li>
        </ul>
      </div>

export default { 
      name: "marquee-up",
      data() { 
        return { 
          animateUp: false,
          listData: ['12***ve 成功邀请12人 已获奖金60元', 'l***e 成功邀请5人 已获奖金40元', 'l***e 成功邀请1人 已获奖金5元'],
          timer: null
        }
      },
      mounted() { 
        this.timer = setInterval(this.scrollAnimate, 1500);
      },
      methods: { 
        scrollAnimate() { 
          this.animateUp = true
          setTimeout(() => { 
            this.listData.push(this.listData[0])
            this.listData.shift()
            this.animateUp = false
          }, 500)
        }
      },
      destroyed() { 
        clearInterval(this.timer)
      }
    };

.marquee-wrap  { 
      width: 80%;
      height: 40px;
      border-radius: 20px;
      background: rgba($color: #000000, $alpha: 0.6);
      margin: 0 auto;
      overflow: hidden; .marquee-list { 
        li { 
          width: 100%;
          height: 100%;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          padding: 0 20px;
          list-style: none;
          line-height: 40px;
          text-align: center;
          color: #fff;
          font-size: 18px;
          font-weight: 400;
        }
      }
      .animate-up { 
        transition: all 0.5s ease-in-out;
        transform: translateY(-40px);
      }
    }

[Link 1]: https://segmentfault.com/a/1190000021193974?utm_source=tag-newest
[2021042615573066.gif_pic_center]: /images/20221022/7a7c97fea39b48a5b9bb1e0e4efc2396.png