SOURCE

console 命令行工具 X clear

                    
>
console
var app = new Vue({
    el: '#app',
    data: {
        arr: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2,2,2,2,2, 2,2,2,2,2,3,3,3,3,3,3,3,3,3,3,4,4,4,4,4,4,4,4,4,4,],
        arr2: [],
        isRun: false,
        peishu: 0,
    },
    methods: {
        load() {
            this.isRun = true;
            console.log(123)
            let min = this.peishu * 20;
            let max = ++this.peishu * 20
            this.arr.forEach((item, index) => {
                if (index > min && index < max) {
                    this.arr2.push(item);
                    index == max-1?this.isRun=false:''
                    console.log(this.isRun)
                }
            })
        }
    },
    created: function () {
        this.load();
        window.addEventListener("scroll", () => {
            //页面滚动高度 document.documentElement.scrollTop;
            //页面视窗高度 document.body.clientHeight;
            //懒加载的box的高度 this.$refs.scroll.offsetHeight
            //当 滚动高度+视窗的高度 < box的高度的时候-50 开始加载;
            if (!this.isRun && document.documentElement.scrollTop + document.body.clientHeight < this.$refs.scroll.offsetHeight - 50) {
                
                this.load();
                // this.arr.forEach((item, index) => {
                //     if (index > 20) {
                //         this.arr2.push(item);
                //     }
                //     index == this.arr.length-1?this.isRun=false:''
                // })
                // for (let i = 1; i <= 20; i++) {
                //     this.arr2.push(new Date().toString());
                //     if (i == 20) {
                //         this.isRun = false
                //     }
                // }
            }
        })
    },
    mounted: function () {
        console.log(this.$refs.scroll.offsetHeight);
        console.log(document.body.clientHeight)
    }
})
<div id="app">

    <div class="scroll" ref="scroll">
        <div v-for="(item,index) in arr2" :v-key="index">{{item}}</div>
    </div>

</div>
.top,.bottom{
    height: 20px;
    background-color:pink; 
}
#app{
    height: 100%
}
html,body{
    height: 200px
}

本项目引用的自定义外部资源