vue实现滚动到底部加载新数据

最新推荐文章于 2025-01-10 09:45:10 发布

原创

最新推荐文章于 2025-01-10 09:45:10 发布 · 2.1k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文详细介绍了如何在前端开发中实现懒加载功能，通过监听滚动事件，在页面滚动到底部时触发数据加载，实现数据的分批加载，提高用户体验。文章提供了具体的Vue.js代码示例，展示了如何使用axios进行数据请求，并在滚动到底部时动态加载数据，直至所有数据加载完毕。

data()
    {
        return{
            list:[],
            k:0
        }
    },
    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("我已经滚动到底部了触发这个事件了")//此处可以添加数据请求
                this.$axios.get("/static/data.json").then((res)=>{
                    //console.log(res.data.lists.length)
                    if(this.k>res.data.lists.length-1)
                    {
                        console.log(this.list)
                        console.log("数据加载完毕")
                        this.k=this.list.length-1;
                    }
                    else
                    {
                        this.list.pus