Как изменить компонент при скролле vue js?

Question

[myskypesla]

Есть сайт, каждая страница занимается 100% высоты:
- на первой странице (компонент 1) есть квадрат;
- на второй странице (компонент 2) есть круг;

Вопрос:
Как сделать чтобы при скролле внизу или вверх происходило переключение между компонентами? Хочу сделать плавный переход между компонентами, так как дизайн предполагает плавность.

Заранее спасибо.

Answer 1

[Evgeny Kulakov]

Подписывайтесь на событие скролла, меняете один компонент на другой.

Comments

[myskypesla]

https://codepen.io/tochkadev/pen/GWzXRN, сделал, можете подсказать, как быть если у меня есть ещё и 3-ий компонент "c, как определить что если я нахожусь на роуте "a" и delta > 0, то перейти на router "b", а если нахожусь на router "b" delta > 0, то перейти на компонент C

[Evgeny Kulakov]

Что-то типа такого можно попробовать: https://codepen.io/kerf/pen/YQRoxM

[myskypesla]

Evgeny Kulakov: Захардкодил всё https://codepen.io/myskypesla/pen/OgaeEM но видите какая проблема с прокруткой? :)

[Evgeny Kulakov]

myskypesla: а зачем хардкодить, вроде мой вариант рабочий был? Проблемы не вижу или не понимаю) У меня все переключается

[myskypesla]

Evgeny Kulakov: у меня apple magic mouse, на ней проскакивает сразу к третьему компоненту, потому что видимо есть инерция, думаю такой же эффект будет на тачпаде любого ноутбука

[Evgeny Kulakov]

Мошт какую-нить задержку воткнуть, т.е. вызывать все что-внутри обработчика через settimeout или debounced функцию

[Evgeny Kulakov]

Как-то так: https://codepen.io/kerf/pen/PjxMdO но не знаю насколько это поможет.

[myskypesla]

Ну вроде бы всё работает, спасибо Евгений. Очень не хватает такого функционала, потому что будет геморно в такой ситуации без beforeChange и afterchange

[myskypesla]

Evgeny Kulakov: Евгений, а вы случайно не знаете как отключить такое действие для мобильных устройств? Весь контент просто не поместиться на мобильном и придётся делать контент с пролистыванием.

[Evgeny Kulakov]

Как вариант определить, что это мобильный браузер и изменить поведение на необходимое. Вообще то, что вы пытаетесь сделать не своем юзер френдли имхо. Т.к. человек видит, что к него задизаблена прокрутка и он может просто не догадаться покрутить колесом.

[myskypesla]

Evgeny Kulakov: внизу экрана будет иконка мышки с анимацией скролла, которая подскажет пользователю. Хочу попробовать проект сделать с помощью vue, получу практические навыки, да и не хочется использовать jquery и fullpage slider, топорно всё это выглядит. А тут крупный бренд и у них представление товара на этом сайте будет, хотят анимацию красивую и т.д.

[Evgeny Kulakov]

myskypesla: ок, если интересно, то можем обсудить вопросы сотрудничества)

[myskypesla]

Evgeny Kulakov: хорошо, я уточню у руководителей

Answer 2

[Artem0071]

Для плавности можно использовать внутренние возможности вью

Comments

[myskypesla]

Это понятно. Вопрос в другом был.