Vue 原生页面触底加载

效果图

效果链接网站Kinghiee

核心代码

要想实现触底加载，第一步写监听鼠标滑动事件，并监听

上图为触底加载的原理图。
当窗口高度加上页面高度大于图片的高度(黑色小框)时，开始加载图片

methods:{
 scroll() {
                let scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;//页面滚动高度
                let windowHeight=window.innerHeight;//窗口高度
                let card_sectionTop=card_section.offsetTop;//card_section距离顶部的偏移高度（card_section为你的照片或div元素ID）
                let card_sectionHeight=card_section.offsetHeight;//card_section的高度
                if(card_sectionTop+card_sectionHeight

监听

      mounted(){
            window.addEventListener('scroll', this.scroll,false);
        },