Vue 中简易文字跑马灯效果：灵活且高效

前端

2023-12-20 10:17:24

介绍

在用户界面设计中，文字跑马灯效果是一种常见且有效的展示方式，用于吸引注意力或传达重要信息。在 Vue.js 中，使用 translateX 效果和定时器，我们可以轻松实现一个简易的文字跑马灯。

实现原理

简易文字跑马灯的实现原理很简单：

首先，将文本内容包裹在一个容器元素中，并设置其 overflow: hidden。这将隐藏超出容器范围的文本。
接下来，使用 translateX 效果将文本元素沿水平轴移动，使其向左或向右滚动。
通过设置一个定时器，以特定的间隔不断更新 translateX 的值，从而实现连续的滚动效果。

使用方式

在 Vue.js 中，我们可以使用 v-for 指令和 transition-group 组件来创建文字跑马灯。代码示例如下：

<template>
  <transition-group name="marquee" tag="ul">
    <li v-for="text in texts" :key="text">
      {{ text }}
    </li>
  </transition-group>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  setup() {
    const texts = ref(['Vue', '文字跑马灯', '效果'])

    onMounted(() => {
      const el = document.querySelector('.marquee')
      const width = el.scrollWidth
      el.style.transform = `translateX(-${width}px)`
      setInterval(() => {
        el.style.transform = `translateX(${el.style.transform.slice(10, -3) - 1}px)`
      }, 100)
    })

    return {
      texts
    }
  }
}
</script>

<style>
.marquee {
  overflow: hidden;
  white-space: nowrap;
}
.marquee li {
  display: inline-block;
  margin-right: 10px;
}
</style>