Индикатор прокрутки может быть реализован в блогах, чтобы пользователь знал, куда он прокрутил страницу.
В этой статье мы собираемся создать индикатор прокрутки в 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. Это предотвратит рендеринг плагина на сервере.
Что ж, это классная функция, которую вы можете добавить в свое приложение.
Чтобы узнать больше о том, как работать с этим плагином, перейдите по этой ссылке.
Если вы нашли эту статью интересной, пожалуйста, не стесняйтесь поделиться.
