主页 / 问题 / 931043
Accepted
Alexxosipov
Asked:2020-01-11 23:55:42 +0000 UTC2020-01-11 23:55:42 +0000 UTC

Vue.js 在滚动时隐藏导航栏

  • 772

有以下组件：

<template>
  <div class="header">
    Header content
  </div>
</template>
<script>
  export default {

  }
</script>
<style>
  .header {
    position: fixed;
    top: 0;
    left: 0;
    height: 100px;
    width: 100%;
  }
</style>

问题：如果滚动高度> 200px header-hidden，如何添加类？div.header在 vue 中挂起处理程序的最佳位置在哪里window.on？当元素被销毁时，它们是否需要被销毁？

javascript

1 个回答

  1. Best Answer

    为了正确操作，处理程序最好放在块mounted或created. destroyed它应该从块中删除。

    <template>
  <div ref="header" class="header">
    Header content
  </div>
</template>


<script>
  mounted(){
    window.addEventListener('scroll', this.onScroll);
  },
  methods: {
    onScroll() {
      if (window.pageYOffset > 200) {
        this.$refs.header.classList.add('header-hidden');
      }
    },
  },
  destroyed() {
    window.removeEventListener('scroll', this.onScroll);
  }
</script>
    • 1

相关问题