Как прослушать событие прокрутки окна в компоненте VueJS?

Как прослушать событие прокрутки окна в компоненте VueJS?

22.08.2017 06:50:12 Просмотров 69 Источник

Я хочу прослушать событие прокрутки окна в моем компоненте Vue. Вот что я пытался до сих пор:

<my-component v-on:scroll="scrollFunction">
    ...
</my-component>

С scrollFunction(event)определяется в моих методах компонента, но он, похоже, не работает.

Кто-нибудь знает, как это сделать?

Спасибо!

У вопроса есть решение - Посмотреть?

Ответы - Как прослушать событие прокрутки окна в компоненте VueJS? / How to listen to the window scroll event in a VueJS component?

Является ответом!
jeerbl

22.08.2017 06:50:12

На самом деле я нашел решение. Я добавляю прослушиватель событий в scroll

Надеюсь, это поможет!

https://stackoverflow.com/questions/45822150/how-to-listen-to-the-window-scroll-event-in-a-vuejs-component/45822151#comment92136678_45822151
Что произойдет, если он не будет уничтожен? Это будет работать на всех страницах?
https://stackoverflow.com/questions/45822150/how-to-listen-to-the-window-scroll-event-in-a-vuejs-component/45822151#comment92244415_45822151
@AlexanderKim правильно. Он будет продолжать запускать метод, который вы предоставили, даже если компонент больше не виден.
https://stackoverflow.com/questions/45822150/how-to-listen-to-the-window-scroll-event-in-a-vuejs-component/45822151#comment96601230_45822151
@AlexanderKim если вы используете компонент keep-alive, и вы хотите, чтобы это прекратилось, когда он не активен, вы должны использовать деактивацию вместо уничтожения и использовать активацию вместо создания. Это может также использовать mounted вместо created, так как это не гарантируется, что он будет смонтирован, даже если он будет создан.
https://stackoverflow.com/questions/45822150/how-to-listen-to-the-window-scroll-event-in-a-vuejs-component/45822151#comment97901962_45822151
@jeerbl не может сделать эту работу на моем конце с Vue компоненты я использую framework7.io/vue
https://stackoverflow.com/questions/45822150/how-to-listen-to-the-window-scroll-event-in-a-vuejs-component/45822151#comment101457154_45822151
@jeerbl есть что-то еще не сделали для этого, чтобы работать. Пытаюсь что-то утешить в функции handleScroll, но ничего не происходит.
kushalvm

19.10.2018 11:29:28

Ваши требования были на компоненте, но вы закончили с добавлением на теле, а не на компоненте. Конечно, вы можете сделать это и на конкретном элементе, но эй ...Вот что работает непосредственно с пользовательскими компонентами Vue.

 <MyCustomComponent nativeOnScroll={this.handleScroll}>

или

<my-component v-on:scroll.native="handleScroll">

и определите метод для handleScroll. Просто!

https://stackoverflow.com/questions/45822150/how-to-listen-to-the-window-scroll-event-in-a-vuejs-component/52888594#comment92801894_52888594
какого черта nativeOnScroll?
https://stackoverflow.com/questions/45822150/how-to-listen-to-the-window-scroll-event-in-a-vuejs-component/52888594#comment92807247_52888594
При работе с пользовательскими компонентами Vue, если вы хотите инициировать любое собственное событие, скажем-нажмите, прокрутите, измените-вам нужно использовать native с ним. onChange или onScroll просто не будут работать. В качестве простого примера представьте себе <MyButton v-on:click="thisWontWork" />но <MyButton v-on:click.native="thisWorks" />
https://stackoverflow.com/questions/45822150/how-to-listen-to-the-window-scroll-event-in-a-vuejs-component/52888594#comment92872993_52888594
Да, nativeмодификатор событий иногда является обязательным. У меня сложилось впечатление, что nativeOnScroll, который упоминается, - это нечто большее, чем просто пользовательское событие, испускаемое ребенком. Извиняюсь
https://stackoverflow.com/questions/45822150/how-to-listen-to-the-window-scroll-event-in-a-vuejs-component/52888594#comment95312820_52888594
Большое спасибо ! Это решение работало намного лучше для меня, чем определение прослушивателя событий !
agm1984

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

Loilo

26.03.2019 02:33:55

Я много раз нуждался в этой функции, поэтому я извлек ее в миксин . Его можно использовать следующим образом:

import windowScrollPosition from 'path/to/mixin.js'

new Vue({
  mixins: [ windowScrollPosition('position') ]
})

Это создает position.

Не стесняйтесь играть с этим CodeSandbox демо .

Вот код миксина. Это тщательно прокомментировано, поэтому не должно быть слишком сложно получить представление о том, как это работает:

[x,y]
https://stackoverflow.com/questions/45822150/how-to-listen-to-the-window-scroll-event-in-a-vuejs-component/55356150#comment101044059_55356150
Объедините этот ответ с debounce (найденным ниже), и у вас есть твердое решение! Спасибо
https://stackoverflow.com/questions/45822150/how-to-listen-to-the-window-scroll-event-in-a-vuejs-component/55356150#comment101049331_55356150
@Визуализация это во многом зависит от того, что вы хотите сделать на прокрутке. До тех пор, пока вы не выполняете очень дорогостоящие задачи, вам на самом деле даже не нужен debounce-тест на 3-летнем телефоне среднего и нижнего уровня Android (Honor 5C) с этой демонстрацией: vue-scroll-fuicczvgsv.now.sh
Eduardo Martins

15.09.2019 04:55:57

Я думаю, что лучший подход-это просто добавить ".пассивный"

v-on:scroll.passive='handleScroll'
Закрыть X