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

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.push(res.data.lists[this.k])
                    }
                    this.k++;
                    console.log(this.k)
                })
                }
        }
    },
    mounted()
    {
     
        window.addEventListener('scroll', this.lazyLoading); // 滚动到底部，再加载的处理事件
        this.$axios.get("/static/data.json").then((res)=>{
            this.list=res.data.list;
        })
    }
}

在template里面直接渲染list就行了
这个是滑动到底部在原有的数据上再次加载数据每次加一条直到所有的数据全部加载完成