vue里某一元素添加滚动事件并上拉加载更多数据
当你并不是整页滚动，而是页面中拥有一个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
版权声明：本文为studycollect原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。