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就行了
這個是滑動到底部在原有的數據上再次加載數據每次加一條直到所有的數據全部加載完成