<!DOCTYPE html>
<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>
效果