vue2实现文字跑马灯效果

第一种方式

html

CSS

.info{
  display: flex;
  overflow: hidden;
  text-overflow: ellipsis;
  height:30px;
  line-height: 30px;
  padding-left: .5rem;
  margin-bottom: 5px;
  border: 1px solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(to right, #082e5d, #001531),linear-gradient(90deg, #3579CB, #011532);
  font-size: calc(100vw * 12 / 1920);
  width:100%;
  color: #fff;
  ::v-deep span{
    color: #7CB8FE;
    font-weight: 600;
    //padding:0 5px;
  }
}

JS

move(zoumadeng){
      const info = document.querySelector(".info"); // 容器元素
      const textNode = document.querySelector(".info > .text"); // 文字元素
      textNode.innerHTML= textNode.innerHTML + zoumadeng
      // container.appendChild(textNode.cloneNode(true)); // 复制元素到后方
      const textWidth = textNode.offsetWidth; // 获取文字元素宽度
      let count = info.offsetWidth; // 初始化向左偏移为容器大小
      const loop = () => {
          if(count <= -textWidth) { // 如果文字偏移超出一个文字元素的宽度则复原
            textNode.style["margin-left"] = 0;
            count = info.offsetWidth
          }
          textNode.style["margin-left"] = `${count--}px`; // 继续向左移动
          window.requestAnimationFrame(() => loop()); // 动画递归调用
      }
      window.requestAnimationFrame(() => loop()); // 启动动画
    },

第二种方式

html

CSS

.info{
  height:30px;
  line-height: 30px;
  padding-left: .5rem;
  margin-bottom: 5px;
  border: 1px solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(to right, #082e5d, #001531),linear-gradient(90deg, #3579CB, #011532);
  font-size: calc(100vw * 12 / 1920);
  overflow: hidden;
  width:100%;
  color: #fff;
  ::v-deep span{
    color: #7CB8FE;
    font-weight: 600;
    //padding:0 5px;
  }
}

这里有一点要注意的是：v-html 的样式，直接写在外部样式可能不会生效。可以尝试使用穿透样式（::v-deep 或者 >>>）

JS

lang() {
        //阻止lang再次执行
        if (this.setInterval != null) return
        // 使用substring截取字符串
        this.setInterval = setInterval(() => {
            //获取头一个 字符
            let qian = this.text.substring(0, 7)
            //获取后面的所有字符
            let hou = this.text.substring(7)
            //将获取到的字符拼接起来
            this.text = hou + qian

            // this.text = this.text
        }, 800)
    },

这种是通过截取字符串的方式实现滚动，如果文本中含有 html 标签的时候可能会出现标签展现在页面中的情况。