当前位置：首页 > 文章列表 > 文章 > 前端 > 实现在 Vue 中实现文字滚动的方法

实现在 Vue 中实现文字滚动的方法

2024-03-28 08:03:29 0浏览收藏

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《实现在 Vue 中实现文字滚动的方法》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

Vue 是一种非常流行的 JavaScript 框架，用于构建现代的、响应式的 web 应用程序。在 Vue 中实现文字滚动效果是常见的需求，比如在新闻列表或滚动广告中。本文将介绍如何使用 Vue 实现文字滚动效果。

使用 CSS 动画

最基本的方法是使用 CSS 动画。在 Vue 中，可以使用以下代码实现文字的无限滚动：

<template>
  <div class="scrolling-text" :style="{ animationDuration: duration }">
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    duration: {
      type: String,
      default: "15s" // 滚动一次所需时间
    }
  }
};
</script>

<style>
.scrolling-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: scrolling-text 15s linear infinite;
}

@keyframes scrolling-text {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>

上面的代码创建了一个带有 CSS 动画的组件。该组件有一个持续时间 duration 属性，可以让组件的滚动速度根据需要调整。

注意，上面代码中的 white-space: nowrap、overflow: hidden 和 text-overflow: ellipsis 属性用于限制文本在一行上显示，并将多余的文本截断。而动画的 animation 属性则指定了动画名称、持续时间、速度曲线和重复次数。

使用 CSS transition

除了使用动画，还可以使用 CSS 过渡。一个简单的例子如下：

<template>
  <div class="scrolling-text">
    <div ref="mask" class="mask" :style="{ width: maskWidth }">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      maskWidth: 0,
      contentWidth: 0,
      scroll: false
    };
  },
  mounted() {
    this.contentWidth = this.$refs.mask.scrollWidth; // 文本内容宽度
    this.maskWidth = this.$el.clientWidth; // 设置遮罩宽度，让文本在内部滚动
    if (this.contentWidth > this.maskWidth) this.scroll = true; // 当文本宽度大于遮罩宽度时，开始滚动
    window.addEventListener("resize", this.resizeHandler);
  },
  destroyed() {
    window.removeEventListener("resize", this.resizeHandler);
  },
  methods: {
    resizeHandler() {
      // 改变窗口大小时，重新获得文本内容宽度和遮罩宽度
      this.contentWidth = this.$refs.mask.scrollWidth;
      this.maskWidth = this.$el.clientWidth;
      if (this.contentWidth > this.maskWidth) this.scroll = true;
      else this.scroll = false;
    }
  },
  computed: {
    scrollStyle() {
      // 计算文本滚动过渡样式
      if (this.scroll) {
        return {
          transform: `translate3d(-${this.contentWidth}px, 0, 0)`,
          transition: `transform ${this.contentWidth / 50}s linear`
        };
      }
      return { transform: "none", transition: "none" };
    }
  }
};
</script>

<style>
.scrolling-text {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.mask {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  white-space: nowrap;
  overflow: hidden;
}
</style>

上面的代码中，首先通过引入 Element.scrollWidth 属性获取文本内容的宽度。在组件挂载和窗口大小改变时，用 JavaScript 计算出文本内容和遮罩的宽度，判断是否需要滚动。

当文本内容需要滚动时，使用 CSS 过渡和 transform 属性实现滚动。计算出 -5000px 数值作为位移值的方法是，先获得文本内容的宽度，再除以速度，速度是 50，因为我们想要滚动需要的时间是文本内容宽度除以速度。