Question

我已经开始使用Vue CLI，但是遇到了处理窗口滚动位置的问题。

仅从Vue文档中复制了this example，但这是行不通的。

这是我的Nav.vue组件：

<template>
   <nav v-scroll="handleScroll"></nav>
</template>

<script>
export default {
   name: 'my-nav',
   data() {
      return {
         scrolled: false
      }
   },
   directives: {
      scroll: {
         inserted: function (el, binding) {
            let f = function (evt) {
               if (binding.value(evt, el)) {
                  window.removeEventListener('scroll', f)
               }
            }
         }
      }
   },
   methods: {
      handleScroll: function (evt, el) {
         if (window.scrollY > 50) {
            el.setAttribute(
               'style',
               'opacity: .5; background-color: red;'
            )
         }
         return window.scrollY > 100
      }
   }
}
</script>

<style lang="scss" scoped>
   nav {
      position: fixed;
      width: 100%;
      height: 68px;
      background-color: white;
      z-index: 100;
   }
</style>

在这种情况下发生错误：

error  in ./src/components/Nav.vue

Module Error (from ./node_modules/eslint-loader/index.js):
error: 'f' is assigned a value but never used (no-unused-vars)

我还搜索了其他方法来处理滚动事件，但是没有一个可行的方法。

在这种情况下，handleScroll方法将被忽略：

<template>
   <nav v-bind:class="{ hidden: scrolled}"></nav>
</template>

<script>
export default {
   name: 'my-nav',
   data() {
      return {
         scrolled: false
      }
   },
   methods: {
      handleScroll: function () {
         this.scrolled = window.scrollY > 150;
      }
   },
   created: function () {
      window.addEventListener('scroll', this.handleScroll);
   },
   destroyed: function () {
      window.removeEventListener('scroll', this.handleScroll);
   }
}
</script>
<style>
.hidden {
  opacity: .3;
}
</style>

在我看来，用Vue更容易解决这些简单的问题，但我错了。

如何使滚动事件正常工作？

Answer 1

您的第二种方法应该起作用，但有一点警告：您没有在组件数据中正确设置scrolled：您应该使用this.scrolled，即：

handleScroll: function () {
   this.scrolled = window.scrollY > 150;
}

请参见概念验证示例：

new Vue({
  el: '#app',
  data() {
    return {
      scrolled: false
    }
  },
  methods: {
    handleScroll: function() {
      this.scrolled = window.scrollY > 150;
    }
  },
  created: function() {
    window.addEventListener('scroll', this.handleScroll);
  },
  destroyed: function() {
    window.removeEventListener('scroll', this.handleScroll);
  }
});

body {
  min-height: 200vh;
}

nav {
  position: fixed;
  top: 20px;
  left: 20px;
}

.hidden {
  opacity: 0.3
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <nav v-bind:class="{ hidden: scrolled }">NAV</nav>
</div>

Vue：滚动侦听器问题

1 个答案: