Реализация бесконечной прокрутки с помощью Vue.js scroll

Реализация бесконечной прокрутки с помощью Vue.js scroll

От автора: функция бесконечной прокрутки в данный момент используется повсеместно. Но не для каждого сайта или приложения она подходит. Данная функция особенно полезна, когда вам нужно загружать большие объемы данных или изображений только тогда, когда пользователь нуждается в них, а не когда-либо один раз.

Социальные медиа, такие как Twitter, Facebook и Instagram, популяризировали эту функцию на протяжении многих лет. Реализовать собственную бесконечную прокрутку на вашем сайте или в приложении проще, чем вы думаете. Для этого вам понадобится функция Vue js scroll.

В этой статье будет использоваться Random User API. API описывается, как «что-то наподобие Lorem Ipsum, но для пользователей». Это не только отлично подходит для данной реализации, но также очень полезно для оформления профилей пользователей в будущих проектах.

Прежде чем начать, создайте новый проект Vue.js, используя простой шаблон Vue CLI webpack-simple. В этом примере мы будем использовать Axios и MomentJS для извлечения данных и форматирования даты, соответственно.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Получение исходных данных пользователя

Существуют различные пакеты npm для реализации бесконечной прокрутки, которые вы можете использовать для своего приложения Vue, но некоторые из них содержат много ненужных функций. Для целей этой статьи мы обойдемся без плагина или пакета, и мы напишем простую функцию JavaScript, которая извлекает новый набор данных при прокрутке вниз окна браузера.

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

App.vue

Стоит отметить, что не рекомендуется выполнять при загрузке пять вызовов служб. Random User API возвращает только одного случайного пользователя за раз. Поэтому, чтобы получить пять исходных пользователей, потребовалось пять вызовов служб.

Если вы откроете в консоли массив persons или откроете Vue Devtools, вы должны увидеть массив из пяти пользователей. Если это так — отлично! Давайте переберем эти данные в template, зададим стили и продолжим:

App.vue

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Реализация логики бесконечной прокрутки

Теперь собственно к основному предмету … бесконечной прокрутке! В методах вашего компонента вам нужно создать новую функцию с именем scroll() и загрузить ее в метод цикла приложения mounted().

Этот метод scroll()должен содержать простое условие, которое определяет нижнюю часть страницы, оценивает выполнение условия, как истину или ложь, и выполняет что-то. Мы будем использовать свойства объекта документа documentElement.scrollTop, documentElement.offsetHeight и свойство окна innerHeight, чтобы определить, нужно ли выполнять прокрутку:

Внутри этого условия добавим с помощью Axios метод службы GET для извлечения другого случайного пользователя из Random User API.

App.vue

Эта функция выполняет вызов службы и добавляет нового случайного «пользователя» в массив persons только тогда, когда пользователь прокручивается страницу вниз. Теперь вы сможете прокручивать страницу … бесконечно и каждый раз видеть нового «пользователя».

Заключение

Бесконечная прокрутка звучит пугающе, но, как было показано, это довольно просто. При каждой прокрутке страницы мы получаем новые данные с помощью Axios, а затем переносим эти данные в массив. Для отложенной загрузки изображений просто введите источник изображения в массив данных, обработайте его через цикл в template и привяжите к массиву через <img :src=»">.

Автор: Dave Berning

Источник: https://alligator.io/

Редакция: Команда webformyself.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

VUE JS. Быстрый старт

Практический курс по созданию веб-приложения на VUE JS с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree