Vue懒加载手写逻辑

需求：比如我们要先加载6条信息，触底时候再加载6条信息

1、第一次加载6条，aaa为我们的接口，所以在mounted里面写this.aaa(6)

2、在aaa事件里面传num,如aaa(num)，然后拼接在接口

3、每次触底，再次执行aaa接口

4、定义moreNum,每次增加的次数写在触底事件里面

data() {
    return {
        moreNum: 0,			//触底更多
    }
},
mounted() {
    this.aaa(6);        //初始加载6条
    var that = this;
    // 滚动触底事件
    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("触底发生的事件")
            that.aaa(that.moreNum + 6)
        }
    }
},
methods:{
    aaa(num){
        this.moreNum = num;
        var _this = this;
        $.ajax({
            url:xxxxxxxxxx?num="+num,       //xxxxxxx为你接口地址
            success:function(res){
                _this.aaa = res.data;
            }
        });
    },
}