vue遇上懒加载

1，元素

图片.png

2，监听滚动事件

图片.png

 代码：
    mounted() {
        $(window).on("scroll",this.scrollfn)
    }

3，判断数据加载的时刻

图片.png

scrollfn(){
        var $load = $(".loading-more").eq(0)
        //滚动高度
        var scrollTop = $(window).scrollTop(),
        //窗口高度+滚动高度（元素刚好要进入窗口）
            s_rTop = $(window).height()+scrollTop,
        //元素到文档顶部高度
            offsetTop= $load.offset().top,
        //元素底部刚好出窗口上边（元素刚好要离开窗口）
            e_rTop = offsetTop+$load.outerHeight()

        if(offsetTop<s_rTop&&scrollTop<e_rTop){
            this.loads = true
            this.getSearchList()
        }else{
            this.loads = false
        }
   }

4，数据加载

图片.png

5，vue数据

图片.png