Question

我正在使用VueJ，事件v-on：scroll.passive遇到问题，我正在搜索，但是示例不多，所以我无法使其正常工作。

<template>
   <div id="app" v-on:scroll.passive="onScroll">
      <content-component :posts="posts"></content-component>
   </div>
</template>
<script>
  import ContentComponent from './components/ContentComponent.vue';
  export default {
    name: 'app',
    components: {
      ContentComponent,
    },
    data(){
      return{
        posts : {},
      }
    },
    methods:{
      .......
      onScroll : function () {
        console.log('aaa');
      },
    }
  }
</script>

当我向下或向上滚动到网站时，没有任何反应，方法onScroll不起作用，我在哪里错？我正在使用最新的Vuejs。

感谢帮助

Answer 1

很少有信息可以帮助您。但是，您是否添加了自定义滚动指令？

请从Vuejs.org网站检查此示例。它包含对用户滚动的简单反应。 CodePen example https://codepen.io/sdras/pen/983220ed949ac670dff96bdcaf9d3338

下面，我粘贴了它们用于滚动的指令。

Vue.directive('scroll', {
  inserted: function(el, binding) {
    let f = function(evt) {
      if (binding.value(evt, el)) {
        window.removeEventListener('scroll', f);
      }
    };
    window.addEventListener('scroll', f);
  },
});

Answer 2

您可以分别为组件的创建和 destroyed 生命周期方法添加和删除侦听器，如下所示

  created() {
    document.addEventListener('scroll', this.onScroll)
  },
  destroyed() {
    document.removeEventListener('scroll', this.onScroll)
  }

Vue.js事件v-on：scroll.passive无法正常工作吗？

2 个答案: