我剛開始學習 Vue 并嘗試在頁面向上、向下和滾動到達頂部時更改標題的樣式。在 JS 我有這個：
var prevScrollpos = window.pageYOffset; const header = document.querySelector("header");
window.addEventListener("scroll", function () {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
header.classList.add("scrolled");
header.classList.remove("scrollDown");
}else {
header.classList.add("scrollDown");
header.classList.remove("scrolled");
}
if (currentScrollPos === 0) {
header.classList.remove("scrollDown");
header.classList.remove("scrolled");
}
prevScrollpos = currentScrollPos;
});
但是我不知道如何在vue 3中制作它希望您的幫助提前謝謝！
uj5u.com熱心網友回復：
您可以使用模板參考。
這是使用您的代碼的一些示例：
<template>
<!-- assign a reference to html element using ref attribute -->
<header ref="headRef"></header>
</template>
- 使用選項 API
<script>
export default {
methods: {
vueOnScroll() {
var prev = window.pageYOffset;
const refs = this.$refs.headRef; // assign the reference in variable
window.addEventListener("scroll", () => {
var curr = window.pageYOffset;
if (prev > curr) {
refs.classList.add("scrolled");
refs.classList.remove("scrollDown");
} else {
refs.classList.add("scrollDown");
refs.classList.remove("scrolled");
}
if (curr === 0) {
refs.classList.remove("scrollDown");
refs.classList.remove("scrolled");
}
prev = curr;
});
},
},
mounted() {
// run the function when the component's mount
this.vueOnScroll();
}
}
</script>
- 使用組合 API
<script>
import { ref } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
export default {
setup() {
const headRef = ref(null); // obtain the reference
onMounted(() => {
var prev = window.pageYOffset;
window.addEventListener("scroll", () => {
var curr = window.pageYOffset;
if (prev > curr) {
headRef.value.classList.add("scrolled");
headRef.value.classList.remove("scrollDown");
} else {
headRef.value.classList.add("scrollDown");
headRef.value.classList.remove("scrolled");
}
if (curr === 0) {
headRef.value.classList.remove("scrollDown");
headRef.value.classList.remove("scrolled");
}
prev = current;
});
});
return { headRef };
},
};
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/409620.html
標籤：
上一篇：在箭頭函式中添加多個引數時顯示錯誤“引數未定義”但它在正常函式呼叫中作業
下一篇：為什么總是有例外？