vue 实现列表自动轮播，并且鼠标移入停止列表，移出继续滚动

最新推荐文章于 2025-09-10 02:14:56 发布

原创最新推荐文章于 2025-09-10 02:14:56 发布 · 3.3k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

这段代码展示了如何使用 Vue.js 创建一个无缝滚动效果。通过监听 `mouseenter` 和 `mouseleave` 事件来控制定时器，实现在鼠标悬停时停止滚动，离开时恢复。主要涉及 `scroll` 事件处理、DOM 操作以及定时器的使用，创建了两个相同内容的列表进行无缝滚动。

直接上代码

<template>
  <div>

    <div
      id="box"
      @mouseenter="mouseenterEvent()"
      @mouseleave="mouseleaveEvent(scrollTime)"
    >
      <ul id="listbox1">
        <li v-for="(item, index) in list" :key="index">{{ item }}</li>
      </ul>
      <ul id="listbox2">
  
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      timer: null,
      scrollTime: 20,
    };
  },
  methods: {
    scroll(t) {
      var ul1 = document.getElementById("listbox1");

      var ul2 = document.getElementById("listbox2");

      var ulbox = document.getElementById("box");

      ul2.innerHTML = ul1.innerHTML;

      ulbox.scrollTop = 0; // 开始无滚动时设为0

      this.timer = setInterval(this.rollStart, t);
    },
    // 开启滚动
    rollStart() {
      // 上面声明的DOM对象为局部对象需要再次声明
      // 无缝轮播需要两个相同内容的盒子
      var ul1 = document.getElementById("listbox1");

      // var ul2 = document.getElementById("listbox2");

      var ulbox = document.getElementById("box");

      // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0

      if (ulbox.scrollTop >= ul1.scrollHeight) {
        ulbox.scrollTop = 0;
      } else {
        ulbox.scrollTop++;
      }
    },
    // 鼠标移入关闭定时器
    mouseenterEvent() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
      // // 只显示一个盒子的内容
      // document.getElementById("listbox2").style.display = "none";
    },
    // 鼠标移出重新调用定时器
    mouseleaveEvent(t) {
      console.log(1);
      if (!this.timer) {
        this.timer = setInterval(this.rollStart, t);
      }
      //  document.getElementById("listbox2").style.display = "block";
    },
  },
  mounted() {
    //开启滚动
    this.scroll(this.scrollTime);
  },
  destroyed() {
    // 页面销毁清除定时器
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },
};
</script>

<style lang="less" scoped>
#box {
  width: 500px;
  height: 200px;
  border: 1px solid #000;
  //溢出隐藏
  overflow: hidden;
  &:hover {
    // 实现Y轴可滚动
    overflow-y: scroll;
  }
  &::-webkit-scrollbar {
    width: 0px;
  }
}
#listbox1 {
  width: 500px;
  height: 400px;
  border: 1px solid red;
  box-sizing: border-box;

  li {
    height: 40px;
    border: 1px solid blue;
    box-sizing: border-box;
  }
}
#listbox2 {
  width: 500px;
  height: 400px;
  border: 1px solid red;
  box-sizing: border-box;

  li {
    height: 40px;
    border: 1px solid blue;
    box-sizing: border-box;
  }
}
</style>