Vue滚动到底部加载更多数据

滚动加载更多实战

最新推荐文章于 2025-01-14 17:01:02 发布

原创

最新推荐文章于 2025-01-14 17:01:02 发布 · 3.3k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文详细介绍如何使用Vue.js实现滚动到底部自动加载更多数据的功能。通过监听滚动事件并结合页面高度、可视区高度及滚动高度的判断，实现数据的动态加载。文章还探讨了常见问题及其解决方案，如设置事件监听器、调整触发条件以确保正确加载。

之前呢写过这种篇章的博客，但是有时候还是有点问题的，这个呢代码和人是一样的，他喜欢活灵活现哈哈，下面在总结以下！
滚动到底部加载数据这个呢可以使用@scroll事件也可以获取可视区高度、滚动高度、页面高度判断去写。
具体如何实现呢？

结合着代码去讲解，以及遇到的坑！！！

<template>
  <div>
     // 这里呢内容随便写，只要超过了可视区就可以触发事件
  </div>
</template>

<script>
export default {
    methods:{
        	lazyLoading () { 
        		// 滚动到底部，再加载的处理事件
        		// 获取 可视区高度`、`滚动高度`、`页面高度`
	            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
	            let clientHeight = document.documentElement.clientHeight;
	            let scrollHeight = document.documentElement.scrollHeight;
	            if (scrollTop + clientHeight >= scrollHeight) { // 滚动到底部，逻辑代码
	                //事件处理
	                console.log("滚动到底部，触发")//此处可以添加数据请求
	                // 这这里可以写一些业务逻辑，请求数据等
                }
       		 }
    },
    // 这里呢首先在methods里面写好一个方法，最后通过`window.addEventListener`去调用
    created()