Touch события

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

Основные события touch

В Naive UI события touch обрабатываются через стандартные DOM-события, интегрированные в компоненты. Основные события:

  • touchstart — срабатывает при первом контакте пальца с экраном.
  • touchmove — срабатывает при перемещении пальца по поверхности.
  • touchend — срабатывает при отрыве пальца от экрана.
  • touchcancel — срабатывает при прерывании события, например, при системных уведомлениях.

Каждое из этих событий передает объект TouchEvent, содержащий массив touches, targetTouches и changedTouches, что позволяет получить точные координаты взаимодействия и количество касаний.

Использование touch-событий в компонентах

Для привязки touch-событий в Naive UI используются стандартные слушатели через onXXX пропсы или директивы Vue:

<n-button 
  @touchstart="handleTouchStart"
  @touchmove="handleTouchMove"
  @touchend="handleTouchEnd">
  Кнопка с touch
</n-button>

Функции-обработчики получают объект события, из которого можно извлечь координаты:

function handleTouchStart(event) {
  const touch = event.touches[0];
  console.log(`Начало касания: x=${touch.clientX}, y=${touch.clientY}`);
}

function handleTouchMove(event) {
  const touch = event.touches[0];
  console.log(`Движение пальца: x=${touch.clientX}, y=${touch.clientY}`);
}

function handleTouchEnd(event) {
  const touch = event.changedTouches[0];
  console.log(`Конец касания: x=${touch.clientX}, y=${touch.clientY}`);
}

Реализация свайпа

Свайп — это типичное взаимодействие на мобильных устройствах, которое можно реализовать, вычисляя смещение пальца по экрану:

let startX = 0;
let startY = 0;

function handleTouchStart(event) {
  const touch = event.touches[0];
  startX = touch.clientX;
  startY = touch.clientY;
}

function handleTouchEnd(event) {
  const touch = event.changedTouches[0];
  const deltaX = touch.clientX - startX;
  const deltaY = touch.clientY - startY;

  if (Math.abs(deltaX) > Math.abs(deltaY)) {
    if (deltaX > 50) {
      console.log("Свайп вправо");
    } else if (deltaX < -50) {
      console.log("Свайп влево");
    }
  } else {
    if (deltaY > 50) {
      console.log("Свайп вниз");
    } else if (deltaY < -50) {
      console.log("Свайп вверх");
    }
  }
}

Ключевой момент: пороговое значение смещения (50px в примере) помогает отфильтровать случайные касания и мелкие дрожания пальца.

Применение в Naive UI компонентах

Naive UI компоненты, такие как n-card, n-drawer, n-carousel, могут обрабатывать touch-события для создания интуитивной мобильной навигации:

  • n-carousel — можно реализовать перелистывание слайдов свайпом, используя touchstart, touchmove и touchend.
  • n-drawer — свайп вниз или вбок может закрывать панель.
  • n-button и n-tag — поддерживают длинное нажатие или жесты для кастомного поведения.

Пример интеграции свайпа с n-carousel:

<n-carousel
  :show-arrow="false"
  @touchstart="handleTouchStart"
  @touchend="handleTouchEnd">
  <n-carousel-item v-for="i in 5" :key="i">
    Слайд {{ i }}
  </n-carousel-item>
</n-carousel>

Отслеживание множественных касаний

Naive UI позволяет обрабатывать несколько одновременных касаний для реализации жестов вроде pinch (увеличение/уменьшение):

function handleTouchMove(event) {
  if (event.touches.length === 2) {
    const [touch1, touch2] = event.touches;
    const distance = Math.hypot(
      touch2.clientX - touch1.clientX,
      touch2.clientY - touch1.clientY
    );
    console.log("Расстояние между пальцами:", distance);
  }
}

Использование нескольких касаний особенно важно для мультитач-компонентов и интерактивных карт, графиков или редакторов изображений.

Профилактика проблем с скроллом

При обработке touch-событий часто возникает конфликт со скроллом страницы. Для его предотвращения применяется event.preventDefault():

function handleTouchMove(event) {
  event.preventDefault(); // предотвращает стандартный скролл
  const touch = event.touches[0];
  console.log(`Движение пальца: x=${touch.clientX}, y=${touch.clientY}`);
}

Naive UI рекомендует аккуратно использовать preventDefault, чтобы не нарушать стандартное поведение интерфейса. Для оптимальной производительности лучше использовать passive-листенеры только там, где скролл не нужен.

Резюме ключевых аспектов

  • touchstart, touchmove, touchend, touchcancel — базовые события для любого мобильного взаимодействия.
  • Расчет смещения пальца позволяет реализовать свайпы и жесты.
  • Множественные касания (touches.length > 1) дают возможность для pinch и мультитач-интерактивности.
  • Контроль стандартного поведения через preventDefault помогает избегать конфликтов с скроллом.
  • Интеграция touch-событий с Naive UI компонентами повышает мобильную интерактивность и улучшает UX.

Хотите, я могу дополнительно написать подробный пример реализации комплексного свайпа с жестами и мультитач на Naive UI, прямо с рабочим кодом и анимациями?

Оглавление