监听页面是事件其实可以理解为给页面注册一个事件
<template><div class="app-header-sticky" :class="{ show: y > 78 }"><div class="container"><router-link class="logo" to="/" /><app-header-nav></app-header-nav><div class="right"><router-link to="/">品牌</router-link><router-link to="/">专题</router-link></div></div></div></template><script>import {ref, onMounted, onBeforeUnmount } from "vue";import AppHeaderNav from "./app-header-nav";export default {name: "AppHeaderSticky",components: {AppHeaderNav },setup(props) {const y = ref(0);onMounted(() => {window.onscroll = () => {const scrollTop = document.documentElement.scrollTop;y.value = scrollTop;}});return {y,};},};</script><style scoped lang='less'>.app-header-sticky {width: 100%;height: 80px;position: fixed;left: 0;top: 0;z-index: 999;background-color: #fff;border-bottom: 1px solid #e4e4e4;transform: translateY(-100%);opacity: 0;&.show {transform: translateY(0);// transform: none;opacity: 1;transition: all 0.5s ease-out;}.container {display: flex;align-items: center;}.logo {width: 200px;height: 80px;background: url(../assets/images/logo.png) no-repeat right 2px;background-size: 160px auto;}.right {width: 220px;display: flex;text-align: center;padding-left: 40px;border-left: 2px solid @xtxColor;a {width: 38px;margin-right: 40px;font-size: 16px;line-height: 1;&:hover {color: @xtxColor;}}}}</style>
监听的时候，大多数场景下还都需要移出监听
<template><div class="app-header-sticky" :class="{ show: y > 78 }"><div class="container"><router-link class="logo" to="/" /><app-header-nav></app-header-nav><div class="right"><router-link to="/">品牌</router-link><router-link to="/">专题</router-link></div></div></div></template><script>import {ref, onMounted, onBeforeUnmount } from "vue";import AppHeaderNav from "./app-header-nav";export default {name: "AppHeaderSticky",components: {AppHeaderNav },setup(props) {const y = ref(0);const getScrollTop = () => {const scrollTop = document.documentElement.scrollTop;y.value = scrollTop;};onMounted(() => {window.addEventListener("scroll", getScrollTop);});onBeforeUnmount(() => {window.removeEventListener("scroll", getScrollTop);});return {y,};},};</script><style scoped lang='less'>.app-header-sticky {width: 100%;height: 80px;position: fixed;left: 0;top: 0;z-index: 999;background-color: #fff;border-bottom: 1px solid #e4e4e4;transform: translateY(-100%);opacity: 0;&.show {transform: translateY(0);// transform: none;opacity: 1;transition: all 0.5s ease-out;}.container {display: flex;align-items: center;}.logo {width: 200px;height: 80px;background: url(../assets/images/logo.png) no-repeat right 2px;background-size: 160px auto;}.right {width: 220px;display: flex;text-align: center;padding-left: 40px;border-left: 2px solid @xtxColor;a {width: 38px;margin-right: 40px;font-size: 16px;line-height: 1;&:hover {color: @xtxColor;}}}}</style>
监听页面是事件其实可以理解为给页面注册一个事件 监听页面滚动事件 vue3监听页面滚动事件
如果觉得《监听页面是事件其实可以理解为给页面注册一个事件 监听页面滚动事件 vue3监听页面滚》对你有帮助，请点赞、收藏，并留下你的观点哦！
