v-touch-swipe свайпы

Компонент v-touch-swipe библиотеки Quasar предоставляет мощный инструмент для отслеживания жестов свайпа на элементах интерфейса. Он интегрируется с Vue и позволяет управлять свайпами в любом направлении: влево, вправо, вверх и вниз. Основная цель компонента — реагировать на жесты пользователя и выполнять соответствующие действия, например, смену карточек, открытие меню или удаление элементов списка.

v-touch-swipe использует внутренний механизм событий, который позволяет обрабатывать свайпы с минимальной задержкой и высокой точностью. Он полностью поддерживает работу на мобильных устройствах и сенсорных экранах.

Подключение и базовое использование

Для использования v-touch-swipe достаточно импортировать компонент из Quasar и добавить его в шаблон Vue:

<template>
  <v-touch-swipe
    @swipe="onSwipe"
  >
    <div class="swipe-area">
      Свайпните меня
    </div>
  </v-touch-swipe>
</template>

<script>
export default {
  methods: {
    onSwipe(evt) {
      console.log('Направление свайпа:', evt.direction);
    }
  }
}
</script>

Ключевые моменты:

  • Событие @swipe срабатывает при завершении жеста.
  • evt.direction возвращает направление свайпа (left, right, up, down).
  • Контейнер v-touch-swipe можно использовать как обертку для любого элемента интерфейса.

Опции компонента

v-touch-swipe поддерживает несколько настроек для управления чувствительностью и поведением свайпов:

Опция Описание Тип Пример
touch-action Определяет, какие направления свайпа активны String "auto", "pan-x", "pan-y"
threshold Минимальная дистанция свайпа для срабатывания Number 50 (пикселей)
prevent-default Блокирует стандартное поведение браузера Boolean true

Пример с настройкой порога и блокировкой дефолтного поведения:

<v-touch-swipe
  @swipe="onSwipe"
  :threshold="60"
  :prevent-default="true"
>
  <div class="swipe-area">Свайпните меня</div>
</v-touch-swipe>

Обработка разных направлений свайпа

Событие swipe возвращает объект с информацией о движении:

{
  direction: 'left', // направление: left, right, up, down
  distance: 120,     // пройденное расстояние в пикселях
  velocity: 0.5      // скорость свайпа
}

Можно легко обрабатывать действия для разных направлений:

methods: {
  onSwipe(evt) {
    switch(evt.direction) {
      case 'left':
        this.nextItem();
        break;
      case 'right':
        this.previousItem();
        break;
      case 'up':
        this.openMenu();
        break;
      case 'down':
        this.closeMenu();
        break;
    }
  }
}

Комбинация с анимацией

Для более плавного интерфейса можно использовать CSS-переходы или QAnimation из Quasar. Например, плавное смещение карточки при свайпе:

<template>
  <v-touch-swipe @swipe="onSwipe">
    <transition name="slide">
      <div v-if="showCard" class="card">Карточка</div>
    </transition>
  </v-touch-swipe>
</template>

<script>
export default {
  data() {
    return { showCard: true };
  },
  methods: {
    onSwipe(evt) {
      if (evt.direction === 'left') this.showCard = false;
    }
  }
}
</script>

<style>
.slide-enter-active, .slide-leave-active {
  transition: transform 0.3s ease;
}
.slide-enter, .slide-leave-to {
  transform: translateX(100%);
}
</style>

Поддержка горизонтальных и вертикальных свайпов одновременно

v-touch-swipe позволяет обрабатывать несколько направлений одновременно, что особенно полезно для слайдеров и таблиц с прокруткой:

<v-touch-swipe
  @swipe="onSwipe"
  touch-action="pan-x pan-y"
>
  <div class="scrollable-area">
    Прокручиваемый контент
  </div>
</v-touch-swipe>

Особенности:

  • pan-x активирует горизонтальные свайпы, pan-y — вертикальные.
  • Можно комбинировать, чтобы реагировать на оба направления.

Оптимизация под мобильные устройства

  • Использовать :prevent-default="true" для предотвращения скролла при свайпе.
  • Настроить threshold для уменьшения ложных срабатываний.
  • Для сложных жестов комбинировать с v-touch-hold и v-touch-pan из Quasar для поддержки длинного удержания и перетаскивания.

Интеграция с Vuex и управлением состоянием

События свайпа можно использовать для управления глобальным состоянием приложения:

methods: {
  onSwipe(evt) {
    if (evt.direction === 'left') {
      this.$store.commit('carousel/nextSlide');
    } else if (evt.direction === 'right') {
      this.$store.commit('carousel/prevSlide');
    }
  }
}

Это упрощает создание интерактивных галерей, каруселей и досок задач, где свайпы напрямую влияют на данные приложения.

Вывод

v-touch-swipe в Quasar предоставляет полную поддержку жестов свайпа с гибкой настройкой чувствительности, направления и интеграции с анимациями и глобальным состоянием. Использование этого компонента позволяет создавать динамичные, отзывчивые интерфейсы, полностью адаптированные под мобильные устройства и сенсорные экраны.

Оглавление