<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>
Vue3+原生js 实现无限滚动
本文介绍了如何使用Vue.js实现一个具有无限滚动效果的列表,通过监听DOM高度和滚动位置,实现内容的自动加载。
摘要由CSDN通过智能技术生成