Сделать скролл-индикатор в Nuxt.js

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

В этой статье мы собираемся создать индикатор прокрутки в Nuxt.js. Если вы не знакомы с Nuxt.js и его архитектурой, рекомендуем ознакомиться с этой статьей. Это поможет вам быстро освоить Nuxt.js. Мы будем делать что-то похожее на то, что используют такие сайты, как xteam.com.

Индикатор прокрутки может быть реализован в блогах, чтобы пользователь знал, куда он прокрутил страницу. Некоторые из преимуществ реализации индикатора прокрутки:

  • Он обеспечивает красивый вид веб-страницы, особенно когда применяется к статьям в блогах.
  • Пользователь может легко проверить свой прогресс в чтении.

Мы будем использовать пакет npm и плагин, известный как vue-scroll-indicator.
Чтобы использовать этот плагин npm, нам сначала нужно установить его в наше приложение.

Чтобы установить vue-scroll-indicator, откройте терминал и выполните приведенную ниже команду.

npm install vue-scroll-indicator

Эта команда установит этот плагин в наше приложение.

Зарегистрируйте плагин

Чтобы зарегистрировать плагин и сделать его доступным в нашем приложении, нам нужно перейти в папку плагинов, расположенную в корне структуры вашего приложения Nuxt, и создать файл с именем vue-scroll-indicator.js.

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

После этого нам нужно открыть наш файл nuxt.config.js, расположенный в корне структуры нашего приложения, и зарегистрировать наш плагин.

Если вам интересно, почему мы это делаем, вот почему.

Для приложения Nuxt.js, отображаемого на стороне сервера, этот плагин выдаст ошибку неопределенного окна. Это связано с тем, что плагин настроен для работы только на стороне клиента, а не на сервере.

См. также:  Шаблон проектирования паттерна

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

Причина, по которой мы устанавливаем для параметра SSR значение false.

Перейдите к плагинам и зарегистрируйте vue-scroll-indicator, как показано ниже.

plugins: [
 { src: ‘~/plugins/vue-scroll-indicator’, ssr: false }
 ],```

Визуализировать его в компоненты нашего приложения

Чтобы отобразить плагин в наших компонентах, нам не нужно импортировать его, как другие компоненты. Мы просто включаем его следующим образом.

<! — vue-scroll-indicator →>
<vue-scroll-indicator>
</vue-scroll-indicator>

Стиль нашего индикатора vue-scroll

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

Мы можем установить другой цвет фона в соответствии с нашим сайтом и увеличить высоту индикатора полосы прокрутки.

Как применить стиль?

<! — vue-scroll-indicator →
<vue-scroll-indicator
 height=”4px”
 color=”#32d9cb”
 background=”none”
>
</vue-scroll-indicator>

Высота: здесь мы указываем высоту индикатора прокрутки.
Цвет: здесь мы указываем шестнадцатеричное значение нашего предпочтительного цвета. Это будет цвет индикатора прокрутки vue.

Заключение

Чтобы использовать плагин в приложении Nuxt, отображаемом на стороне сервера, необходимо установить для параметра SSR значение false. Это предотвратит рендеринг плагина на сервере.

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

Если вы нашли эту статью интересной, пожалуйста, не стесняйтесь поделиться.

Понравилась статья? Поделиться с друзьями:
IT Шеф
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: