Как прослушать событие прокрутки окна в компоненте VueJS?
Я хочу прослушать событие прокрутки окна в моем компоненте Vue. Вот что я пытался до сих пор:
<my-component v-on:scroll="scrollFunction">
...
</my-component>
С scrollFunction(event)определяется в моих методах компонента, но он, похоже, не работает.
Кто-нибудь знает, как это сделать?
Спасибо!
Ответы - Как прослушать событие прокрутки окна в компоненте VueJS? / How to listen to the window scroll event in a VueJS component?
19.10.2018 11:29:28
Ваши требования были на компоненте, но вы закончили с добавлением на теле, а не на компоненте. Конечно, вы можете сделать это и на конкретном элементе, но эй ...Вот что работает непосредственно с пользовательскими компонентами Vue.
<MyCustomComponent nativeOnScroll={this.handleScroll}>
или
<my-component v-on:scroll.native="handleScroll">
и определите метод для handleScroll. Просто!
nativeOnScroll?
<MyButton v-on:click="thisWontWork" />но <MyButton v-on:click.native="thisWorks" />
nativeмодификатор событий иногда является обязательным. У меня сложилось впечатление, что nativeOnScroll, который упоминается, - это нечто большее, чем просто пользовательское событие, испускаемое ребенком. Извиняюсь
17.03.2019 08:52:25
По моему опыту, использование прослушивателя событий на прокрутке может создать много шума из-за передачи в этот поток событий, что может вызвать проблемы с производительностью, если вы выполняете громоздкую handleScrollдает хорошую производительность в отношении UX.
Вот пример использования ответа с самым высоким рейтингом с добавлением lodash debounce:
100msПопробуйте изменить значение 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');
}
},
created() {
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);
}
}
на 100и 0, чтобы вы могли видеть разницу в том, как / когда 1000вызывается.
Бонус: вы также можете сделать это еще более кратким и многоразовым способом с помощью библиотеки, такой как handleScroll. Это отличный вариант использования для вас, чтобы узнать о пользовательских директивах в Vue, если вы их еще не видели. Проверить https://github.com/wangpin34/vue-scroll.
Это также отличный учебник Сары Дразнер в документах Vue: https://vuejs.org/v2/cookbook/creating-custom-scroll-directives.html
26.03.2019 02:33:55
Я много раз нуждался в этой функции, поэтому я извлек ее в миксин . Его можно использовать следующим образом:
import windowScrollPosition from 'path/to/mixin.js'
new Vue({
mixins: [ windowScrollPosition('position') ]
})
Это создает position.
Не стесняйтесь играть с этим CodeSandbox демо .
Вот код миксина. Это тщательно прокомментировано, поэтому не должно быть слишком сложно получить представление о том, как это работает:
[x,y]15.09.2019 04:55:57
Я думаю, что лучший подход-это просто добавить ".пассивный"
v-on:scroll.passive='handleScroll'