Vue跑马灯marquee组件使用方法详解

本文实例为大家分享了Vue跑马灯marquee组件的具体代码，供大家参考，具体内容如下

一、实现效果

二、实现过程

前言：最开始用间隔器方案制作了一个跑马灯，但是放在移动端中会出现严重的掉帧卡顿现象，于是整理思路后采用transition方案制作一个从右到左的动画处理问题

思路整理：

1. 过渡是需要设定时间的，但是跑马灯中的文本可能是长短不一的

解决方案：根据文本的总宽度（即文本总长）设定过渡时间，假设文本宽度500px，我们将其除以50，即过渡时间为10s

原生js表示如下：

const text = document.getElementsByClassName("text")[0]  // 文本
const textWidth = text.clientWidth  // 文本的总宽度
const tranTime = textWidth / 50  // 根据文本宽度设置过渡时间
text.style.transition = "left " + tranTime + "s linear"  // 滚动前绑定过渡属性

2. 要想持续滚动需要重复触发滚动的事件

解决方案：通过上文的过渡时间设定一个重复时间

原生js表示如下：

const againTime = tranTime * 1000 + 1000  // 重新开始滚动时间计算(动态)
// 开始滚动
    function textRoll() {
      // 滚动操作
      // ``````
      setTimeout(() => {
        textRoll()
      }, againTime);
    }

3. 接下来实现文本滚动效果

1) 先将文本设定在容器最右侧

2) 为文本绑定设定好的过渡属性，例：transition: left 10s linear

3) 因为有过渡属性，此时再将文本设定到容器最左侧，就会产生一个从右向左的移动的过渡

原生js表示如下：

function textRoll() {
      text.style.transition = "left " + tranTime + "s linear"  // 滚动前绑定过渡属性
      text.style.left = -textWidth + "px"  // 向容器最左移动
      setTimeout(() => {
        setTimeout(() => {
          textRoll()
        }, 0);
      }, againTime);
    }

4.到目前就能有一次完整的滚动了，接下来是定义重新滚动

让文本回到容器最右侧，但是目前文本已经有过渡属性了，如果改变其left会导致他从左向右滚动，所以要先清除过渡属性，再改变其left到容器最右侧，然后用一开始设定的再次滚动时间绑定定时器

function textRoll() {
      text.style.transition = "left " + tranTime + "s linear"  // 滚动前绑定过渡属性
 
      text.style.left = -textWidth + "px"  // 向容器最左移动
 
      setTimeout(() => {
        // 还原文本位置
        text.style.transition = ""  // 还原前需清除过渡
        text.style.left = wrapperWidth + "px"
        setTimeout(() => {
          textRoll()
        }, 0);
      }, againTime);
    }

三、js版本源码

  
  
  
  
  


  

    
如何四纪为天子，不及卢家有莫愁。
  
 
  

四、Vue组件源码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。