获取某元素的当前位置,用深度监听,当前位置和上一次位置。进行相应的判断和操作
<template>
<div id="vilege">
<!-- 内容 -->
<div class="content">
<div id="main" class="main" @scroll="scroll"></div>
<!-- 尾部 -->
<div class="footer"></div>
</div>
<!-- 头部固定在头部看,默认为显示,当下滑时,头部隐藏,上滑头部就显示 -->
<div class="header" v-show="showHeader">
<div class="heads">
<div class="head_left">
<img src="@img/newcard/privilege/position_left.png" alt />
<div>
<p class="text">办理有惠生活熊猫卡全年预计可省</p>
<p class="numbers">¥24164</p>
</div>
</div>
<p class="head_right">本页预计可省,视个人消费情况而定</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
height: "",
showHeader: true
};
},
methods: {
scroll(e) {
this.height = e.target.scrollTop;
}
},
watch: {
height: {
handler(newName, oldName) {
if (newName > oldName) {
this.showHeader = false;
} else {
this.showHeader = true;
}
}
}
}
};
</script>
<style lang="scss" scoped>
#vilege {
width: 100vw;
padding: 0;
margin: 0;
background-color: #1a1919;
}
// 头部
.header {
width: 100vw;
height: 0.6rem;
position: fixed;
top: 0;
left: 0;
z-index: 820500;
background: rgba(0, 0, 0, 0.3);
}
.content {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
// 内容
.main {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
width: 100vw;
}
// 尾部
.footer {
width: 100vw;
background: #000;
}
}
</style>
~~~`在这里插入代码片`