当前位置：首页 > VUE

vue实现向右无缝滚动

2026-01-22 00:57:39VUE

Vue 实现向右无缝滚动

使用 CSS 动画和 Vue 数据绑定

通过 CSS 的 animation 属性和 Vue 的数据绑定实现无缝滚动效果。创建一个包含滚动内容的容器，利用 CSS 动画让内容从右向左移动。

<template>
  <div class="scroll-container">
    <div class="scroll-content" :style="{ animation: `scroll ${duration}s linear infinite` }">
      {{ content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: "这里是需要滚动的内容，可以是任意文本或HTML元素。",
      duration: 10 // 动画持续时间，单位秒
    };
  }
};
</script>

<style>
.scroll-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.scroll-content {
  display: inline-block;
  animation: scroll 10s linear infinite;
}

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

使用 JavaScript 动态控制滚动

通过 Vue 的 ref 和 JavaScript 的 setInterval 动态控制滚动位置，实现更灵活的无缝滚动效果。

<template>
  <div class="scroll-container" ref="container">
    <div class="scroll-content" ref="content">
      {{ content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: "这里是需要滚动的内容，可以是任意文本或HTML元素。",
      speed: 2 // 滚动速度，单位像素/帧
    };
  },
  mounted() {
    this.startScrolling();
  },
  methods: {
    startScrolling() {
      const container = this.$refs.container;
      const content = this.$refs.content;
      let position = 0;

      setInterval(() => {
        position -= this.speed;
        if (position <= -content.offsetWidth) {
          position = container.offsetWidth;
        }
        content.style.transform = `translateX(${position}px)`;
      }, 16); // 约60帧/秒
    }
  }
};
</script>

<style>
.scroll-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.scroll-content {
  display: inline-block;
}
</style>

动态内容无缝滚动

如果内容需要动态更新，可以通过 Vue 的 watch 或 computed 属性监听内容变化，并重新计算滚动逻辑。

<template>
  <div class="scroll-container" ref="container">
    <div class="scroll-content" ref="content">
      {{ dynamicContent }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicContent: "",
      speed: 2
    };
  },
  mounted() {
    this.startScrolling();
    // 模拟动态内容更新
    setInterval(() => {
      this.dynamicContent = new Date().toLocaleString();
    }, 1000);
  },
  methods: {
    startScrolling() {
      const container = this.$refs.container;
      const content = this.$refs.content;
      let position = 0;

      setInterval(() => {
        position -= this.speed;
        if (position <= -content.offsetWidth) {
          position = container.offsetWidth;
        }
        content.style.transform = `translateX(${position}px)`;
      }, 16);
    }
  }
};
</script>

无缝循环滚动多条内容

对于多条内容需要循环滚动，可以通过复制内容并动态调整位置实现无缝效果。

<template>
  <div class="scroll-container" ref="container">
    <div class="scroll-content" ref="content">
      <span v-for="(item, index) in items" :key="index">{{ item }}</span>
      <span v-for="(item, index) in items" :key="index + items.length">{{ item }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["内容1", "内容2", "内容3"],
      speed: 2
    };
  },
  mounted() {
    this.startScrolling();
  },
  methods: {
    startScrolling() {
      const container = this.$refs.container;
      const content = this.$refs.content;
      let position = 0;
      const contentWidth = content.offsetWidth / 2;

      setInterval(() => {
        position -= this.speed;
        if (position <= -contentWidth) {
          position = 0;
        }
        content.style.transform = `translateX(${position}px)`;
      }, 16);
    }
  }
};
</script>

<style>
.scroll-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.scroll-content {
  display: inline-block;
}

.scroll-content span {
  margin-right: 20px;
}
</style>