如何在 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>

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

How to apply different styles when scroll up and down in vue 3?

scroll

styles

function

vue.js