vue3<setup>中判断当前视口距离顶部的距离
在 Vue 3 的 <script setup>
语法中,你可以使用 Composition API 来跟踪视口距离顶部的距离。你可以创建一个响应式的 ref
来存储这个距离,并在 onMounted
生命周期钩子中设置一个滚动事件监听器来更新这个值。下面是一个示例:
<template>
<div>
<!-- 你的组件内容 -->
<p>当前视口距离顶部的距离: {{ scrollTopDistance }}</p>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
// 创建一个响应式的 ref 来存储视口距离顶部的距离
const scrollTopDistance = ref(0);
// 监听滚动事件来更新视口距离顶部的距离
const updateScrollDistance = () => {
scrollTopDistance.value = window.scrollY || window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
};
// 在组件挂载时添加滚动事件监听器
onMounted(() => {
window.addEventListener('scroll', updateScrollDistance);
// 初始化时也获取一次距离
updateScrollDistance();
});
// 在组件卸载时移除滚动事件监听器
onUnmounted(() => {
window.removeEventListener('scroll', updateScrollDistance);
});
</script>
在这个示例中:
scrollTopDistance
是一个响应式的ref
,用于存储视口距离顶部的距离。updateScrollDistance
是一个函数,它获取当前视口距离顶部的距离,并更新scrollTopDistance
的值。- 在
onMounted
钩子中,我们添加了滚动事件的监听器,以便在每次滚动时调用updateScrollDistance
函数。同时,我们立即调用updateScrollDistance
来获取初始的滚动距离。 - 在
onUnmounted
钩子中,我们移除了滚动事件的监听器,以避免在组件卸载后仍然监听滚动事件,这有助于防止内存泄漏。
现在,scrollTopDistance
会在每次滚动时自动更新,并且你可以在模板中直接使用 {{ scrollTopDistance }}
来显示当前视口距离顶部的距离。由于 scrollTopDistance
是响应式的,所以当它的值改变时,Vue 会自动更新 DOM。
原文地址:https://blog.csdn.net/H2608520347/article/details/136868198
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!