第一种方式(通过可视高度和滚动条高度来判断)
mounted() { this.getParmas() let that = this; window.onscroll = function () { var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var windowHeight = document.documentElement.clientHeight || document.body.clientHeight; var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; if (scrollTop + windowHeight == scrollHeight) { that.page_count = that.page_count + 1; that.getUserJourney(); } }; },
第二种(通过内容区的可视高度和滚动条高度判断)
mounted() { let _:any=this const SELECTWRAP_DOM:HTMLElement | null = document.querySelector('.el-select-dropdown .el-select-dropdown__wrap') SELECTWRAP_DOM&&SELECTWRAP_DOM.addEventListener('scroll',function (e:any) { const CONDITION = this.scrollHeight - this.scrollTop > this.clientHeight if(!CONDITION){ _.getselectData() } }) }
第三种用的是elementUI中的v-infinite-scroll
<div class="box" v-infinite-scroll="test"> <div class="list">111</div> <div class="list">111</div> <div class="list">111</div> <div class="list">111</div> </div>
每次滚动到底部时就可会触发test
这个方法。属性仅在设置了overflow
的地方有效。
目前经测试在elementUI项目有效,具体查看elementUI的无效滚动。其他项目需要安装组件’vue-infinite-scroll
’