当你并不是整页滚动，而是页面中拥有一个fixed固定的头部时
<div class="body-container" style="height: 300px" @scroll="scrollEvent">
<
div
style
=
"height: 200px"
></
div
>
<
div
style
=
"height: 200px"
></
div
>
<
div
style
=
"height: 200px"
></
div
>
</
div
>
重点：只要我能让
<div class="body-container" @scroll="scrollEvent">拥有固定高度，就能触发滚动事件了。
接下来添加滚动事件
export
default
{
name:
'demo'
,
data () {
return
{
msg:
''
,
}
},
methods: {
scroll(e){
//滚动的像素+容器的高度>可滚动的总高度-100像素
if
(e.srcElement.scrollTop+e.srcElement.offsetHeight>e.srcElement.scrollHeight-100){
this
.loadMore();
//加载更多
}
},
}
}
这样就能比较清晰的判断是否滚动到了底部。但是如果仅仅这样写，当滚动到底部100px内时，会触发很多次加载更多，所以我们需要增加一些判断条件
methods: {
scroll(e){
// !this.moreLoading 没有在加载状态，触发加载更多时，把this.moreLoading置未true
// !this.noMore 没有更多的状态为false，当我们取到的数据长度小于1页的数量时，就没有更多了数据了，把 this.noMore置为true，这样就不会触发无意义的加载更多了
if
(e.srcElement.scrollTop+e.srcElement.offsetHeight>e.srcElement.scrollHeight-100 && !
this
.moreLoading && !
this
.noMore){
this
.loadMore();
}
},
}
仅为自己学习记录笔记
原文地址：https://www.jb51.net/article/171961.htm