返回

vue公告轮播：轻松实现左右滚动不间断循环，灵动美观，鼠标停驻即停止滚动

前端

打造灵动美观的公告轮播：Vue公告轮播教程

在当今快节奏的数字世界中，抓住用户的注意力至关重要。醒目的公告轮播可以帮助您脱颖而出，让您的重要信息得到应有的关注。本文将深入探讨如何使用Vue构建一个美观且交互式公告轮播，帮助您提升网站或应用程序的用户体验。

揭秘公告轮播的工作原理

Vue公告轮播的工作原理非常简单。首先，它使用两个span标签来承载公告内容，并应用一些CSS样式。然后，一个定时器被创建，让两个span标签一起移动。

当第二个span标签到达容器的末尾时，第一个span标签将从容器的头部重新开始，跟随在第二个span标签后面继续滚动。当第二个span标签到达容器的头部时，其位置将被重置为0，跟在第一个span标签后面。这种循环往复的过程创造了一种不间断的滚动效果。

步步为营，构建公告轮播

1. 准备公告内容容器

使用两个span标签作为公告内容容器，并为它们添加适当的CSS样式，例如设置宽度和高度，以及应用边框和背景色。

2. 启动定时器，开启滚动

创建一个定时器，并在每次触发时让两个span标签同时移动。根据需要调整时间间隔，以实现所需的滚动速度。

3. 重置位置，保持滚动

当第二个span标签到达容器末尾时，将第一个span标签的位置重置到容器头部。当第二个span标签到达容器头部时，将其位置重置为0，跟在第一个span标签后面。

4. 响应鼠标悬停，暂停滚动

添加鼠标悬停事件，以便在鼠标悬停在公告轮播上时停止滚动。当鼠标移开时，重新启动滚动。

代码示例：

<template>
  <div class="notice-wrapper">
    <span class="notice-item" v-for="item in notices" :key="item.id">{{ item.content }}</span>
    <span class="notice-item" v-for="item in notices" :key="item.id">{{ item.content }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      notices: [
        { id: 1, content: '公告1' },
        { id: 2, content: '公告2' },
        { id: 3, content: '公告3' },
      ],
      timer: null,
      isHover: false,
    };
  },
  mounted() {
    this.startTimer();
  },
  beforeDestroy() {
    this.stopTimer();
  },
  methods: {
    startTimer() {
      this.timer = setInterval(() => {
        if (this.isHover) return;
        const firstItem = this.$refs.noticeItem[0];
        const secondItem = this.$refs.noticeItem[1];
        const firstItemWidth = firstItem.offsetWidth;
        const secondItemWidth = secondItem.offsetWidth;
        const wrapperWidth = this.$refs.noticeWrapper.offsetWidth;
        if (secondItem.offsetLeft + secondItemWidth >= wrapperWidth) {
          firstItem.style.transform = `translateX(${secondItemWidth}px)`;
        }
        secondItem.style.transform = `translateX(-${firstItemWidth}px)`;
      }, 50);
    },
    stopTimer() {
      clearInterval(this.timer);
    },
    handleMouseenter() {
      this.isHover = true;
      this.stopTimer();
    },
    handleMouseleave() {
      this.isHover = false;
      this.startTimer();
    },
  },
};
</script>

<style>
.notice-wrapper {
  overflow: hidden;
  white-space: nowrap;
}
.notice-item {
  display: inline-block;
}
</style>

结论

恭喜您！现在，您已经掌握了使用Vue构建公告轮播的基本原理。通过遵循本文中概述的步骤，您可以创建自己的公告轮播，让您的重要消息以一种引人注目的方式展现。

常见问题解答

  1. 如何更改滚动速度？

    • 在定时器回调中调整时间间隔（例如，从50毫秒更改为100毫秒以减慢滚动速度）。

  2. 如何添加淡入淡出效果？

    • 使用CSS过渡或动画来实现淡入淡出效果。

  3. 如何从右侧滚动？

    • 调整第二个span标签的初始位置（例如，将其设置为transform: translateX(100%)）并更改定时器的逻辑。

  4. 如何自动循环多个公告？

    • 创建一个公告数组，并在定时器回调中循环遍历数组，动态更新公告内容。

  5. 如何使公告轮播响应式？

    • 使用CSS媒体查询根据不同屏幕尺寸调整公告轮播的大小和样式。