Vue3+原生js 实现无限滚动

最新推荐文章于 2025-10-01 06:32:05 发布

原创最新推荐文章于 2025-10-01 06:32:05 发布 · 365 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

本文介绍了如何使用Vue.js实现一个具有无限滚动效果的列表，通过监听DOM高度和滚动位置，实现内容的自动加载。

<template>
<div class="home">
  <h2 :style="{marginLeft:'45%'}">无限滚动demo</h2>
 <div class="home-wrapper" ref="domRef">

    <div v-for="(item, index) in content" :key="index" class="content-wrapper" >
      {{item.name}}
      {{item.sex}}
      {{item.age}}
    </div>
 
  </div>
</div>
 
</template>
<script setup>
import { ref, reactive,onMounted,watch } from "vue";
const domRef = ref(null)
let intervalTimer, timeoutTimer;
const content =
  reactive([{
      name: "张三",
      sex: "男",
      age: 18,
    },
    {
      name: "李四",
      sex: "女",
      age: 19,
    },
    {
      name: "王五",
      sex: "男",
      age: 20,
    }])

const autoScroll = () => {
  if (timeoutTimer) {
    window.clearTimeout(timeoutTimer);
  }
  timeoutTimer = setTimeout(() => {
    const clientH = (domRef.value && domRef.value.offsetHeight) || 0;
    console.log(clientH);
    const scrollH = (domRef.value && domRef.value.scrollHeight) || 0;
    console.log(scrollH);
    if (intervalTimer) {
      window.clearInterval(intervalTimer);
    }

    if (scrollH == clientH) return;
    intervalTimer = setInterval(() => {
      if (domRef.value) {
        const scrollTop = domRef.value.scrollTop;
        const distance = scrollH - clientH;
        if (scrollTop >= distance) {
          domRef.value.scrollTop = -1;
        }
        domRef.value.scrollTop += 1;
      }
    }, 13);
  }, 500);
};
onMounted(() => {
  if(domRef.value){
    autoScroll();
  }
  domRef.value.onmouseenter = () => {
          window.clearInterval(intervalTimer);
          window.clearTimeout(timeoutTimer);
        };

        domRef.value.onmouseleave = () => {
          autoScroll();
        };
});
</script>
<style lang="less" scoped>
.home{
  margin: 0 auto;
.home-wrapper{
  width: 400px;
  height: 260px;
  border: 1px solid #000;
  overflow: hidden;
  margin: 0 auto;
.content-wrapper{
  height: 262px;
}
}
}


</style>