滚动条监听问题
移动端一般数据较多时,会使用分页查询数据,当页面触底时获取下一页数据。一般使用增加滚动条监听判断是否触底。
使用addEventListener增加scroll监听
在mounted中增加scroll监听,在method中定义handleScroll方法。
注意:最后一个参数要设置为true。否则会不好用
mounted() {
document.addEventListener("scroll", this.handleScroll, true);
},
methods:{
handleScroll () {//监听滚动条
var div = document.getElementById('allmsgbox');
var leftHeight = div.scrollTop + div.clientHeight;
var diff = leftHeight - div.scrollHeight;
if (diff > -1 && diff < 1 && this.isMore) {//滚动条在底部
this.getMore()//获取更多
}
},
}
但是在使用过程中发现,当页面跳转时,因为监听仍在会产生报错,需要在销毁时移除监听。
参数要和增加监听时一样,后面参数也为true,否则移除会失败
destroyed() {
document.removeEventListener("scroll", this.handleScroll, true);
},
直接在div上使用@scroll监听事件
虽然最后使用removeEventListener移除了监听,解决了问题,但是路由跳转回原先界面时,仍会报错。
所以最终选择了在需要滚动的div上绑定了@scroll监听事件
e.srcElement获取到节点对象
<div class="body" v-if="showList && showList.length > 0" ref="meetingBox" @scroll="handleScroll" >
......
</div>
methods:{
handleScroll () {//监听滚动条触底
var leftHeight = e.srcElement.scrollTop + e.srcElement.clientHeight;
var diff = leftHeight - e.srcElement.scrollHeight;
if (diff > -1 && diff < 1 && this.isMore) {//滚动条在底部
this.getMore() //获取更多
}
},
}