为什么按钮总是隐藏着？

Question

<div class="app__land-bottom" v-if="isVisible">
  <a href="#projects">
    <img ref="arrowRef" id="arrow" src="./../assets/down.png" alt srcset />
  </a>
</div>

在Vue3中，安装程序不起作用，但在Vue2上使用以下解决方案，用于不显示基于滚动的按钮。

VUE3
<script setup>
import { ref, onMounted, onUnmounted } from "vue";

let isVisible = ref(false);

onMounted(() => {
  window.addEventListener("scroll", () => {
    hideArrow();
  });
});

onUnmounted(() => {
  window.removeEventListener("scroll", () => {
    hideArrow();
  });
});

const hideArrow = () => {
  const currentScroll = window.pageYOffset;
  if (currentScroll > 100) {
    isVisible = false;
  } 
  else if (currentScroll < 100) {
    isVisible = true;
  }
}
</script>

VUE2
<script>
export default {
  created() {
    window.addEventListener('scroll', this.hideArrow)
  },
  data() {
    return {
      isVisible: false, 
    }
  },
  methods: {
    hideArrow() {
      const currentScroll = window.pageYOffset;
      if (currentScroll > 100) {
        this.isVisible = false;
      } else if (currentScroll < 100) {
        this.isVisible = true;
      }
    },
  },
}
</script>

在vue2中，解决方案是有效的，但在Vue3上却没有效果。有什么建议吗？我不明白问题到底在哪里？这将是一个有帮助的答案。

Answer 1

在更改ref：isVisible时，需要键入：isVisible.value而不是isVisible

您的hideArrow函数应该是：

const hideArrow = () => {
  const currentScroll = window.pageYOffset;
  if (currentScroll > 100) {
    isVisible.value = false;
  } 
  else if (currentScroll < 100) {
    isVisible.value = true;
  }
}

有关更多详细信息:请查看Vue中的参考文档