function - vue 3中上下滚动时如何应用不同的样式？

Question

我刚刚开始学习 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 中实现 希望得到您的帮助 提前致谢!

Answer 1

您可以使用Template Refs .

这是使用您的代码的一些示例:

<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>

---

• 使用Composition 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>