От автора: функция бесконечной прокрутки в данный момент используется повсеместно. Но не для каждого сайта или приложения она подходит. Данная функция особенно полезна, когда вам нужно загружать большие объемы данных или изображений только тогда, когда пользователь нуждается в них, а не когда-либо один раз.
Социальные медиа, такие как Twitter, Facebook и Instagram, популяризировали эту функцию на протяжении многих лет. Реализовать собственную бесконечную прокрутку на вашем сайте или в приложении проще, чем вы думаете. Для этого вам понадобится функция Vue js scroll.
В этой статье будет использоваться Random User API. API описывается, как «что-то наподобие Lorem Ipsum, но для пользователей». Это не только отлично подходит для данной реализации, но также очень полезно для оформления профилей пользователей в будущих проектах.
Прежде чем начать, создайте новый проект Vue.js, используя простой шаблон Vue CLI webpack-simple. В этом примере мы будем использовать Axios и MomentJS для извлечения данных и форматирования даты, соответственно.
$ vue init webpack-simple infinite-scroll-vuejs
Получение исходных данных пользователя
Существуют различные пакеты npm для реализации бесконечной прокрутки, которые вы можете использовать для своего приложения Vue, но некоторые из них содержат много ненужных функций. Для целей этой статьи мы обойдемся без плагина или пакета, и мы напишем простую функцию JavaScript, которая извлекает новый набор данных при прокрутке вниз окна браузера.
Прежде чем мы начнем интегрировать бесконечную прокрутку, давайте установим некоторые начальные данные для загрузки страницы:
App.vue
data () { return { persons: [] }
},
methods: { getInitialUsers () { for (var i = 0; i < 5; i++) { axios.get(`https://randomuser.me/api/`) .then(response => { this.persons.push(response.data.results[0]); }); } }
},
beforeMount() { this.getInitialUsers();
}
Стоит отметить, что не рекомендуется выполнять при загрузке пять вызовов служб. Random User API возвращает только одного случайного пользователя за раз. Поэтому, чтобы получить пять исходных пользователей, потребовалось пять вызовов служб.
Если вы откроете в консоли массив persons или откроете Vue Devtools, вы должны увидеть массив из пяти пользователей. Если это так — отлично! Давайте переберем эти данные в template, зададим стили и продолжим:
App.vue
<template> <div id="app"> <h1>Random User</h1> <div class="person" v-for="person in persons"> <div class="left"> <img :src="person.picture.large"> </div> <div class="right"> <p>{{ person.name.first }} {{ person.name.last }}</p> <ul> <li> <strong>Birthday:</strong> {{ formatDate(person.dob) }} </li> <li class="text-capitalize"> <strong>Location:</strong> {{ person.location.city }}, {{ person.location.state }} </li> </ul> </div> </div> </div>
</template> <script>
...
</script> <style lang="scss"> /* Optional Styles */ .person { background: #ccc; border-radius: 2px; width: 20%; margin: 0 auto 15px auto; padding: 15px; img { width: 100%; height: auto; border-radius: 2px; } p:first-child { text-transform: capitalize; font-size: 2rem; font-weight: 900; } .text-capitalize { text-transform: capitalize; } }
</style>
Реализация логики бесконечной прокрутки
Теперь собственно к основному предмету … бесконечной прокрутке! В методах вашего компонента вам нужно создать новую функцию с именем scroll() и загрузить ее в метод цикла приложения mounted().
Этот метод scroll()должен содержать простое условие, которое определяет нижнюю часть страницы, оценивает выполнение условия, как истину или ложь, и выполняет что-то. Мы будем использовать свойства объекта документа documentElement.scrollTop, documentElement.offsetHeight и свойство окна innerHeight, чтобы определить, нужно ли выполнять прокрутку:
window.onscroll = () => { let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight; if (bottomOfWindow) { // Do something, anything! }
};
Внутри этого условия добавим с помощью Axios метод службы GET для извлечения другого случайного пользователя из Random User API.
App.vue
methods: { ..., scroll (person) { window.onscroll = () => { let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight; if (bottomOfWindow) { axios.get(`https://randomuser.me/api/`) .then(response => { person.push(response.data.results[0]); }); } }; },
},
mounted() { this.scroll(this.person);
}
Эта функция выполняет вызов службы и добавляет нового случайного «пользователя» в массив persons только тогда, когда пользователь прокручивается страницу вниз. Теперь вы сможете прокручивать страницу … бесконечно и каждый раз видеть нового «пользователя».
Заключение
Бесконечная прокрутка звучит пугающе, но, как было показано, это довольно просто. При каждой прокрутке страницы мы получаем новые данные с помощью Axios, а затем переносим эти данные в массив. Для отложенной загрузки изображений просто введите источник изображения в массив данных, обработайте его через цикл в template и привяжите к массиву через <img :src=»»>.
Автор: Dave Berning
Источник: https://alligator.io/
Редакция: Команда webformyself.