vue滚动到页面底部时加载

简介: vue滚动到页面底部时加载

handleScroll 函数监听页面滚动事件,当滚动到页面底部时执行代码。

通过这种方式,当用户滚动到页面底部时,将会动态加载更多内容,直到达到设定的总项目数。

const spinning = ref(false); // 正在加载Loading...
onMounted(() => {
window.addEventListener("scroll", handleScroll);
});

onUnmounted(() => {
window.removeEventListener("scroll", handleScroll);
});

const handleScroll = () => {
if (spinning.value) return; // 如果正在加载,直接返回
const scrollHeight = document.documentElement.scrollHeight;
const scrollTop =
document.documentElement.scrollTop || document.body.scrollTop;
const clientHeight = document.documentElement.clientHeight;

// 检查是否滚动到了页面底部
if (scrollHeight - scrollTop - clientHeight < 200) {
// 200 是一个滚动到底部前的偏移量

// 执行的代码......

}
};
文章知识点与官方知识档案匹配,可进一步学

相关文章
|
1天前
|
JavaScript 开发工具 git
大事件项目40---Vue代码里如何引入相对路径图片
大事件项目40---Vue代码里如何引入相对路径图片
|
2天前
|
JavaScript 前端开发
一个好看的vue admin模板
这是一个关于Vue管理模板的引用,提到了[PanJiaChen](https://github.com/PanJiaChen/vue-admin-template)在GitHub上的`vue-admin-template`项目。该项目是一个前端管理模板,链接指向了详细的资源。页面中还包含了一张图片,但markdown格式中无法直接显示。简而言之,这是关于一个基于Vue的后台管理界面模板的参考信息。
|
2天前
|
资源调度 JavaScript API
Vue-treeselect:为Vue应用程序提供强大选择器的指南
Vue-treeselect:为Vue应用程序提供强大选择器的指南
6 0
|
2天前
|
JavaScript
vue知识点
vue知识点
5 0
|
3天前
|
JavaScript 前端开发
Vue,如何引入样式文件
Vue,如何引入样式文件
|
3天前
|
JavaScript
|
3天前
|
JavaScript 前端开发 API
|
3天前
|
JavaScript 前端开发 网络架构
Vue如何实现页面跳转路由,实现单页面跳转
Vue如何实现页面跳转路由,实现单页面跳转
|
3天前
|
JavaScript
Vue搭配ELEMENT组件,路由不能正确跳转bug
Vue搭配ELEMENT组件,路由不能正确跳转bug
Vue搭配ELEMENT组件,路由不能正确跳转bug
|
3天前
|
JavaScript