Vue =＞ Vue监听组件滚动事件

在dom元素上加ref，利用this.$refs.recordwrapper获取到元素，添加滚动监听事件，希望得到的结果是滚动触发事件handleScroll,现在情况是失效，并没有监听到滚动动作，或者说滚动动作并没有出发事件

• 问题：监听事件的参数写错了，带括号就直接调用了函数，去掉括号就好了

<template>
<div class="main">
<div class="content" ref="recordwrapper">
</div>
</div>
</template>
<script>
export default {
data() {
},
watch: {
'chatList': function(e) {
if (e.length) {
this.$nextTick(() => {
this.$refs.recordwrapper.addEventListener('scroll', this.handleScroll);
})
}
}
},
methods: {
handleScroll () {
// 变量scrollTop是滚动条滚动时，距离顶部的距离
this.$nextTick(() => {
// 获取需要滚动的距离
var scrollTop = this.$refs.recordwrapper.scrollTop
// 变量windowHeight是可视区的高度
var windowHeight = this.$refs.recordwrapper.clientHeight
// 变量scrollHeight是滚动条的总高度
var scrollHeight = this.$refs.recordwrapper.scrollHeight
// 滚动条到底部的条件
console.log(scrollTop, windowHeight, scrollHeight);
if (scrollTop == 0 && this.chatList.length !== 0) {
if (this.count > 1) {
this.topLoading = true
this.count -= 1;
this.getWechatCallDetail()
}
}
})
}
},
};
</script>
<style scoped lang="scss">
.main{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction:column;
.head{
width: 100%;
position: fixed;
top: 0;
left:0;
background: #eee;
}
.content{
margin-top: 55px;
height: 100%;
flex: 1;
-webkit-flex: 1;
}
}
</style>

最后

以上就是粗暴铃铛为你收集整理的Vue =＞ Vue监听组件滚动事件的全部内容，希望文章能够帮你解决Vue =＞ Vue监听组件滚动事件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。