Использование с Vue.js

Для интеграции fullPage.js в проект на Vue.js необходимо выполнить несколько ключевых шагов. Начать следует с установки библиотеки через npm:

npm install fullpage.js

После этого можно подключить стили в главный файл приложения, например main.js или App.vue:

import 'fullpage.js/dist/fullpage.css';
import fullpage from 'fullpage.js';

Создание Vue-компонента с fullPage.js

Полезно обернуть fullPage.js в отдельный компонент для удобного управления жизненным циклом и предотвращения конфликтов с Vue-реактивностью.

<template>
  <div id="fullpage">
    <div class="section" v-for="(section, index) in sections" :key="index">
      <h1>{{ section.title }}</h1>
      <p>{{ section.content }}</p>
    </div>
  </div>
</template>

<script>
import fullpage from 'fullpage.js';
import 'fullpage.js/dist/fullpage.css';

export default {
  name: 'FullpageWrapper',
  data() {
    return {
      fpInstance: null,
      sections: [
        { title: 'Раздел 1', content: 'Содержимое первого раздела' },
        { title: 'Раздел 2', content: 'Содержимое второго раздела' },
        { title: 'Раздел 3', content: 'Содержимое третьего раздела' },
      ]
    };
  },
  mounted() {
    this.fpInstance = new fullpage('#fullpage', {
      navigation: true,
      navigationPosition: 'right',
      scrollingSpeed: 700,
      loopBottom: true,
      licenseKey: 'YOUR_KEY_HERE'
    });
  },
  beforeUnmount() {
    if (this.fpInstance) {
      this.fpInstance.destroy('all');
      this.fpInstance = null;
    }
  }
};
</script>

<style scoped>
.section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100vh;
}
</style>

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

  • Инициализация fullPage.js происходит в хуке mounted, чтобы гарантировать доступ к DOM-элементам.
  • Использование beforeUnmount позволяет корректно уничтожать экземпляр fullPage.js и освобождать ресурсы.
  • Для динамических секций удобно использовать v-for, чтобы Vue управлял их обновлением.

Настройка опций fullPage.js в Vue

FullPage.js предоставляет множество опций, которые полностью совместимы с Vue-компонентом:

  • navigation — отображение навигационных точек.
  • scrollingSpeed — скорость прокрутки между секциями.
  • loopBottom и loopTop — зацикливание прокрутки.
  • anchors — якоря для URL, чтобы можно было переходить к конкретной секции через #anchor.

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

this.fpInstance = new fullpage('#fullpage', {
  anchors: ['first', 'second', 'third'],
  navigation: true,
  scrollingSpeed: 700
});

Теперь переход к секции можно осуществлять через URL: /#second.

Реактивное управление секциями

Чтобы обновлять секции динамически после создания компонента, можно использовать метод fullpage_api.reBuild() или удалять и пересоздавать экземпляр fullPage.js.

this.sections.push({ title: 'Новая секция', content: 'Динамически добавленная секция' });
this.$nextTick(() => {
  this.fpInstance.reBuild();
});

$nextTick гарантирует, что DOM уже обновлён, прежде чем fullPage.js пересчитает высоты и позиции.

Использование колбэков fullPage.js

FullPage.js предоставляет колбэки, которые отлично интегрируются с Vue:

  • afterLoad(origin, destination, direction) — вызывается после загрузки секции.
  • onLeave(origin, destination, direction) — перед переходом на следующую секцию.
  • afterRender() — после полной инициализации страницы.

Пример с Vue:

this.fpInstance = new fullpage('#fullpage', {
  navigation: true,
  afterLoad: (origin, destination) => {
    console.log(`Перешли из ${origin.index} в ${destination.index}`);
  },
  onLeave: (origin, destination, direction) => {
    console.log(`Покидаем секцию ${origin.index} в направлении ${direction}`);
  }
});

Интеграция с Vue Router

При использовании Vue Router рекомендуется инициализировать fullPage.js только на страницах, где требуется полный экран. Для этого можно использовать динамический импорт компонента с fullPage.js:

const FullpagePage = () => import('@/components/FullpageWrapper.vue');

const routes = [
  { path: '/fullpage', component: FullpagePage }
];

Также можно использовать якоря для перехода между секциями и синхронизации с маршрутизатором:

this.fpInstance.setActiveAnchor('second');
this.$router.push({ hash: '#second' });

Поддержка адаптивности

FullPage.js поддерживает адаптивные настройки через опцию responsiveWidth и responsiveHeight. Это позволяет отключить прокрутку fullPage на мобильных устройствах:

this.fpInstance = new fullpage('#fullpage', {
  responsiveWidth: 768,
  responsiveHeight: 600
});

Если ширина окна меньше 768px или высота меньше 600px, прокрутка секций будет отключена, и контент отобразится как обычная страница.

Комбинирование с другими Vue-компонентами

FullPage.js совместим с анимациями и динамическим контентом. Для плавного перехода можно использовать Vue Transition внутри секций:

<div class="section">
  <transition name="fade">
    <p v-if="showContent">Контент с анимацией</p>
  </transition>
</div>

При смене секции fullPage.js не мешает работе Vue Transition, если инициализация и обновление DOM происходят корректно.

Итоговые рекомендации

  • Всегда инициализировать fullPage.js в mounted и уничтожать в beforeUnmount.
  • Использовать v-for и $nextTick для динамических секций.
  • Настраивать опции через объект при создании экземпляра для максимальной гибкости.
  • Сочетать с Vue Router и анимациями для полноценного SPA-опыта.
  • Применять адаптивные настройки, чтобы обеспечить корректное отображение на мобильных устройствах.

Полная интеграция fullPage.js с Vue.js позволяет создавать проекты с плавной вертикальной прокруткой, интерактивными секциями и динамическим контентом, полностью сохраняя реактивность и возможности экосистемы Vue.

Оглавление