Vue v-on：滚动问题答案

【问题标题】：Vue v-on:scroll issueVue v-on：滚动问题
【发布时间】：2021-05-11 15:17:24
【问题描述】：

我需要根据 window.scrollY 的位置，将插槽显示在 div 之前或之后。所以基本上我有一个“盒子”，当它被点击时，如果有足够的空间，它会在下面显示插槽，如果没有，则会在顶部显示。

我有这个模板：

<template
    v-on:scroll="fooFunction"
>
    <div class="foo" @click="isOpened = !isOpened" > </div>
    <slot v-if="isOpened">Default Slot Content</slot>
</template>

我试过了

v-on:scroll 
v-on:scroll.passive
@scroll
window.addEventListener('scroll', (e) => {})

似乎没有任何效果。

有人可以帮我解决吗？

谢谢！

【问题讨论】：

window.addEventListener('scroll', (e) => {}) 将触发滚动事件。你能澄清一下你遇到了什么问题吗？

标签： vue.js vuejs3

【解决方案1】：

scroll 绑定没有被 vue/浏览器获取，这意味着滚动事件在加载到 DOM 时被移除。检查下面的例子。

Vue.component('example', {
  props:['content'],
  template: "<div>{{content}}</div>"
});
var app = new Vue({
  el: "#app",
  methods :{
    fooFunction1: function () {
      console.log("fooFunction1 will work");
    },
    fooFunction2: function () {
      console.log("fooFunction2 will not work");
    }
  },
  data : {
    content: "I need that depending on the window.scrollY position, the slot will be displayed before or after the div. So basically I have a 'box' that when its clicked will show the slot below if there is enough space, or on top if there is not."
  }
});

.data-container {
  width: 100px;
  height: 200px;
  overflow: scroll;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="data-container" @scroll="fooFunction1">
    <Example @scroll="fooFunction2" :content="content" />
  </div>
</div>

您可以在此处查看template标签以更好地了解：https://www.webcomponents.org/community/articles/introduction-to-template-element

【讨论】：