Quiero escuchar el evento de desplazamiento de la ventana en mi componente Vue. Esto es lo que probé hasta ahora:
<my-component v-on:scroll="scrollFunction"> ... </my-component> Con scrollFunction(event) definido en mis métodos de componentes, pero parece que no funciona.
¿Alguien tiene alguna idea de cómo hacer esto?
¡Gracias!
En realidad encontré una solución. Agrego un detector de eventos en el evento de scroll cuando se crea el componente y elimino el detector de eventos cuando se destruye el componente.
export default { created () { window.addEventListener('scroll', this.handleScroll); }, destroyed () { window.removeEventListener('scroll', this.handleScroll); }, methods: { handleScroll (event) { // Any code to be executed when the window is scrolled } } }¡Espero que esto ayude!
En mi experiencia, el uso de un detector de eventos en el desplazamiento puede crear mucho ruido debido a la canalización en ese flujo de eventos, lo que puede causar problemas de rendimiento si está ejecutando una función handleScroll voluminosa.
A menudo uso la técnica que se muestra aquí en la respuesta mejor calificada, pero agrego rebote encima, generalmente alrededor de 100ms produce un buen rendimiento para la relación UX.
Aquí hay un ejemplo que usa la respuesta mejor calificada con el rebote de Lodash agregado:
import debounce from 'lodash/debounce'; export default { methods: { handleScroll(event) { // Any code to be executed when the window is scrolled this.isUserScrolling = (window.scrollY > 0); console.log('calling handleScroll'); } }, mounted() { this.handleDebouncedScroll = debounce(this.handleScroll, 100); window.addEventListener('scroll', this.handleDebouncedScroll); }, beforeDestroy() { // I switched the example from `destroyed` to `beforeDestroy` // to exercise your mind a bit. This lifecycle method works too. window.removeEventListener('scroll', this.handleDebouncedScroll); } } Intente cambiar el valor de 100 a 0 y 1000 para que pueda ver la diferencia en cómo/cuándo se llama handleScroll .
BONIFICACIÓN: también puede lograr esto de una manera aún más concisa y reutilizable con una biblioteca como vue-scroll . Es un gran caso de uso para que aprenda sobre las directivas personalizadas en Vue si aún no las ha visto. Consulte https://github.com/wangpin34/vue-scroll .
Este también es un excelente tutorial de Sarah Drasner en los documentos de Vue: https://vuejs.org/v2/cookbook/creating-custom-scroll-directives.html
En vue3, debe usar unmounted o beforeUnmount, en lugar de beforeDestroy .
El enlace del ciclo de vida beforeDestroy no se emite en Vue3
Esto es lo que funciona directamente con los componentes personalizados de Vue.
<MyCustomComponent nativeOnScroll={this.handleScroll}>o
<my-component v-on:scroll.native="handleScroll">y defina un método para handleScroll. ¡Sencillo!