vue,窗口滚动条滚动到底部加载更多

data (){
  return {
      isScroll:true, //是否允许触发触底事件
  }
},
methods:{
    menu() {
           if(this.isScroll){
                    let scroll =
                    this.getScrollTop() + this.getWindowHeight() - this.getScrollHeight();
                    if (scroll > -600) {    //600:距离底部多少像素开始触发
                        console.log('触发加载更多')
                        
                    }
                }
                   
                },
                //滚动条在Y轴上的滚动距离
                getScrollTop() {
                    var documentScrollTop = 0;
                    documentScrollTop = document.documentElement.scrollTop;
                    return documentScrollTop;
                },
                //文档的总高度
                getScrollHeight() {
                    var documentScrollHeight = 0;
                    documentScrollHeight = document.documentElement.scrollHeight;
                    return documentScrollHeight;
                },
                //浏览器视口的高度
                getWindowHeight() {
                    var windowHeight = 0;
                    windowHeight = document.documentElement.clientHeight;
                    return windowHeight;
                },
     },
     mounted (){
        this.$nextTick(() =>{
                window.addEventListener("scroll", this.menu);
            })
        },
       //离开删除绑定事件
         beforeDestroy(){
            window.removeEventListener("scroll",this.menu)
        },
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容