vue 文字自动滚动

最新推荐文章于 2025-06-12 09:46:38 发布

原创

最新推荐文章于 2025-06-12 09:46:38 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了如何在Vue.js项目中实现文字自动滚动的效果。通过创建一个子组件，并在父组件中引入和使用，实现了文本的平滑滚动功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

子组件：

<template>
  <div
    class="m-slide"
    :style="`height: ${height}px; width: ${totalWidth}px;`"
    @mouseenter="onStop"
    @mouseleave="onStart"
  >
    <div
      :style="`will-change: transform; transform: translateX(${-left}px); line-height: ${height}px; width: ${
        width - 20
      }px;`"
      class="u-slide-title"
      v-for="(item, index) in sliderData"
      :key="index"
      :title="item.title"
      @click="onClickTitle(item.title)"
    >
      {
  
  { item.title }}
    </div>
  </div>
</template>
<script>
export default {
  name: "Slider",
  props: {
    sliderData: {
      type: Array,
      required: true,
      default: () => {
        return [];
      },
    },
    totalWidth: {
      type: Number,
      default: 1000,
    },
    height: {
      type: Number,
      default: 45,
    },
    amount: {
      type: Number,
      default: 4,
    },
  },
  data() {