Vue lazy loading handwritten logic

Requirements: For example, we need to load 6 pieces of information first, and then load 6 pieces of information when the bottom is reached

1. Load 6 for the first time, aaa is our interface, so write this.aaa(6) in mounted

2. Pass num in the aaa event, such as aaa(num), and then splicing it in the interface

3. Every time the bottom is reached, execute the aaa interface again

4. Define moreNum, the number of times of each increase is written in the bottoming event

data() {
    return {
        moreNum: 0, // bottom out more
    }
},
mounted() {
    this.aaa(6); //Initial load 6
    var that = this;
    // scroll bottom event
    window.onscroll = function () {
        var marginBot = 0;
        if (document.documentElement.scrollTop) {
            var X = document.documentElement.scrollHeight;
            var Y = document.documentElement.scrollTop + document.body.scrollTop;
            var Z = document.documentElement.clientHeight;
            marginBot = X - Y - Z;
        } else {
            var J = document.body.scrollHeight;
            var I = document.body.scrollTop;
            var K = document.body.clientHeight;
            marginBot = J - I - K;
        }
        if (marginBot <= 0) {
            console.log("The event that bottomed out")
            that.aaa(that.moreNum + 6)
        }
    }
},
methods:{
    aaa(num){
        this.moreNum = num;
        var _this = this;
        $.ajax({
            url:xxxxxxxxxx?num="+num, //xxxxxxx is your interface address
            success:function(res){
                _this.aaa = res.data;
            }
        });
    },
}