v-scroll-fire триггер при скролле

Директива v-scroll-fire предназначена для отслеживания событий скролла и вызова функций при достижении определённых точек на странице или внутри контейнера. Она полезна для ленивой подгрузки контента, анимаций при скролле и динамического изменения состояния компонентов.

Синтаксис использования следующий:

<div v-scroll-fire="scrollHandler" :offset="100">
  Контент
</div>
  • v-scroll-fire – директива, которая отслеживает скролл элемента.
  • scrollHandler – метод компонента, вызываемый при достижении точки срабатывания.
  • :offset – смещение в пикселях от верхнего края контейнера до срабатывания события.

Подключение и регистрация

Quasar автоматически регистрирует директиву v-scroll-fire при использовании CLI-шаблона, поэтому отдельная регистрация не требуется. Однако для ручной регистрации в локальном компоненте можно использовать следующий подход:

import { ScrollFire } from 'quasar'

export default {
  directives: {
    ScrollFire
  },
  methods: {
    scrollHandler({ el, percentage }) {
      console.log('Элемент:', el, 'Процент прокрутки:', percentage)
    }
  }
}
  • Параметр el содержит ссылку на DOM-элемент.
  • percentage показывает, какая часть элемента видна относительно области скролла.

Настройка параметров

Директива поддерживает несколько ключевых опций:

Параметр Описание
offset Смещение в пикселях, после которого срабатывает обработчик.
repeat Если true, событие срабатывает каждый раз при достижении точки.
horizontal Если true, отслеживание происходит по горизонтальному скроллу.
once Если true, обработчик срабатывает только один раз.

Пример использования нескольких параметров:

<div v-scroll-fire="scrollHandler" :offset="50" :repeat="true" :horizontal="false">
  Контент с анимацией
</div>

Примеры применения

Ленивая подгрузка изображений

<template>
  <div v-for="img in images" :key="img.id">
    <img v-scroll-fire="() => loadImage(img)" :data-src="img.src" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { id: 1, src: 'image1.jpg' },
        { id: 2, src: 'image2.jpg' }
      ]
    }
  },
  methods: {
    loadImage(img) {
      const image = new Image()
      image.src = img.src
      image.onl oad = () => console.log(`Загружено: ${img.src}`)
    }
  }
}
</script>

В этом примере изображения загружаются только при скролле к ним, что повышает производительность страниц с большим количеством медиа.

Анимация элементов при прокрутке

<div v-scroll-fire="animateElement" :offset="150">
  <p :class="{ 'fade-in': isVisible }">Текст с анимацией</p>
</div>

<script>
export default {
  data() {
    return {
      isVisible: false
    }
  },
  methods: {
    animateElement({ percentage }) {
      if (percentage > 0.5) this.isVisible = true
    }
  }
}
</script>

<style>
.fade-in {
  opacity: 1;
  transition: opacity 0.5s ease-in;
}
p {
  opacity: 0;
}
</style>

Элемент плавно появляется после того, как половина его области становится видимой.

Горизонтальный скролл

Для отслеживания горизонтального скролла достаточно установить параметр horizontal: true:

<div v-scroll-fire="handleHorizontalScroll" :horizontal="true" :offset="100">
  <div class="scroll-content">
    Горизонтальный контент
  </div>
</div>

Метод handleHorizontalScroll получает аналогичные параметры, включая percentage, показывающий, насколько элемент прокручен по горизонтали.

Частые ошибки и рекомендации

  1. Элемент не срабатывает: убедиться, что родительский контейнер имеет overflow: auto или scroll.
  2. Событие срабатывает слишком рано: увеличить значение offset.
  3. События повторяются непредсказуемо: проверить параметр repeat и логику в обработчике.
  4. Анимации не видны: убедиться, что CSS-классы корректно применяются и transitions определены.

Оптимизация

  • Ограничение количества обработчиков при больших списках элементов через v-for.
  • Использование once: true для анимаций, которые должны срабатывать только один раз.
  • Кеширование результатов подгрузки медиа, чтобы не выполнять повторную загрузку при повторном скролле.

Директива v-scroll-fire в Quasar предоставляет мощный и гибкий инструмент для реактивного управления контентом при скролле, обеспечивая плавные анимации и эффективную загрузку данных без дополнительной библиотеки.

Оглавление