@TheThing

Как правильно связать vue-awesome-swiper и vue-router в Nuxt.js?

При разработке мобильной версии Nuxt-приложения появилась необходимость переходить на другую страницу (другая категория) при свайпе вправо/влево. Решил использовать уже используемый в проекте vue-awesome-swiper через директиву.
Сделать три слайда (предыдущий, текущий, следующий) с начальным вторым элементом и по событию slide-change-transition-end делать $router.replace('новый путь').
Однако возникает проблема, сначала рендерится html код после которого директивой подвязывается свайпер. При этом верстка прыгает на предыдущий слайд, затем обратно на новый текущий. То же самое если использовать свайпер как компонент через .

Есть ли возможность как-нибудь такую схему реализовать через Nuxt или сама концепция фреймворка запрещает такое поведение?
  • Вопрос задан
  • 51 просмотр
Пригласить эксперта
Ответы на вопрос 1
nuykon
@nuykon
Full Stack Developer
А зачем вам слайдшоу то в этом случае? И какая разница nuxt или нет.
Вам надо либо в mounted хуке навесить нативные события:
document.addEventListener('touchstart', this.handleTouchStart, false);        
document.addEventListener('touchmove', this.handleTouchMove, false);

а в методах смотреть данные из события и проверять куда свайпает пользователь и делать $router.replace('новый путь').
Либо использовать уже готовое решение, например
https://github.com/jerrybendy/vue-touch-events
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы