Element的InfiniteScroll无限滚动
https://element.faas.ele.me/#/zh-CN/component/infiniteScroll
vue使用Element的InfiniteScroll无限滚动后滚动监听无效-解决方案
完整源码
<div id="news" v-infinite-scroll="load" infinite-scroll-distance="500" infinite-scroll-delay="400" onscroll="myFunction()">
<div id="naver">导航</div>
</div>
<script>
var news = new Vue({
el: '#news',
//你的代码
});
function myFunction() {
let scrollTop = document.querySelector("#news").scrollTop; // 滚动条偏移量
let offsetTop = document.querySelector('#naver').offsetTop; // 要滚动到顶部吸附的元素的偏移量
news.isFixed = scrollTop > offsetTop + 200 ? true : false; // 如果滚动到顶部了，this.isFixed就为true
news.showFlages = scrollTop > offsetTop + 200 ? false : true;
}
</script>第一步：
获取你所绑定的VUE容器，或者 是Element的InfiniteScroll所绑定容器，一般情况下是InfiniteScroll所绑定容器
document.querySelector("#news")第二步：
在该容器上绑定 οnscrοll="myFunction()" 事件
<div id="news" v-infinite-scroll="load" infinite-scroll-distance="500" infinite-scroll-delay="400" onscroll="myFunction()">
</div>第三步：
获取绑定容器的滚动条偏移量
let scrollTop = document.querySelector("#news").scrollTop; // 滚动条偏移量第四步：
获取导航的相对垂直偏移位置的偏移容器，一般情况下，导航是在最顶部，所以，我这边获取的是导航
let offsetTop = document.querySelector('#naver').offsetTop; // 要滚动到顶部吸附的元素的偏移量第五步：
操作变量，影响DOM结构
news.isFixed = scrollTop > offsetTop + 200 ? true : false; // 如果滚动到顶部了，this.isFixed就为true
news.showFlages = scrollTop > offsetTop + 200 ? false : true;
之前使用的 vue 滚动监听是这样的
<html>
<head id="head">
<meta charset="utf-8">
<title>vue 滚动监听</title>
<script src="js/vue.min.js"></script>
<meta name="keywords" content="">
<meta name="description" content="">
<style>
h1>span {
color: #535353;
background-color: #d1d1d1;
font-weight: 100;
padding: 4px;
font-size: 20px;
}
.divFixed{
width: 120px;
height: 100px;
color: #fff;
text-align: center;
line-height: 100px;
background-color: brown;
}
.right_fixed{
position: fixed;
right: 1px;
}
</style>
</head>
<body style="height: 1800px;">
<h1>vue 滚动监听--测试</h1>
<div id="naver">导航</div>
<di id="div1">
<h1>dom1：<span>{{dom1}}</span></h1>
<h1>dom2：<span>{{dom2}}</span></h1>
<h1>过滤器时间戳转换(1614307462): <span>{{1614307462*1000| formatDate}}</span></h1>
<div class="divFixed" :class="{'right_fixed' : isFixed}">滚动监听--浮动</div>
</di>
<script>
var vm = new Vue({
//绑定容器。
//类型：string | Element。
//属于：选项 / DOM
el: '#div1',
//变量/数据， Vue 实例的数据对象。
//类型：Object | Function。
//属于：选项 / DOM
data: {
dom1: '',
dom2: '',
isFixed: false,//是否浮动
},
//在实例创建完成后被立即调用。
//类型：Function。
//属于：选项 / 生命周期钩子
created() {
this.getDom1('created()调用');
window.addEventListener('scroll', this.handleScroll) // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
},
//实例被挂载后调用。
//类型：Function。
//属于：选项 / 生命周期钩子
mounted() {
this.getDom2('mounted()调用');
},
//包含 Vue 实例可用过滤器的哈希表。
//类型：Object。
//属于：选项 / 资源
filters: {
//例子1
//时间戳格式转换
formatDate: function (value) {
let date = new Date(value);
let y = date.getFullYear();
let MM = date.getMonth() + 1;
MM = MM < 10 ? ('0' + MM) : MM;
let d = date.getDate();
d = d < 10 ? ('0' + d) : d;
let h = date.getHours();
h = h < 10 ? ('0' + h) : h;
let m = date.getMinutes();
m = m < 10 ? ('0' + m) : m;
let s = date.getSeconds();
s = s < 10 ? ('0' + s) : s;
return y + '-' + MM + '-' + d + ' ' + h + ':' + m;
}
},
//所用到的方法都写到这里面。
//类型：{ [key: string]: Function }。
//属于：选项 / DOM
methods: {
//例子1
getDom1(str) {
this.dom1 = str;
},
//例子2
getDom2(str) {
this.dom2 = str;
},
//滚动监听
handleScroll() {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body
.scrollTop // 滚动条偏移量
let offsetTop = document.querySelector('#naver').offsetTop; // 要滚动到顶部吸附的元素的偏移量
this.isFixed = scrollTop > offsetTop + 200 ? true : false; // 如果滚动到顶部了，this.isFixed就为true
this.showFlages = scrollTop > offsetTop + 200 ? false : true;
},
},
});
</script>
</body>
</html>
