效果图

在这里插入图片描述
效果链接网站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<scroll+windowHeight){
                        //这里开始的你请求操作或者是显示数据
                }
            }
            }
       

监听

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

前往低代码交流专区

更多推荐