Nieskończone przewijanie przydaje się, gdy trzeba wyświetlać duże zbiory danych w aplikacji. Dowiedz się, jak zaimplementować go w Vue.
Nieskończone przewijanie to technika, której możesz użyć do wyświetlenia większej ilości treści, gdy użytkownik aplikacji przewija stronę w dół. Eliminuje potrzebę paginacji i umożliwia użytkownikom aplikacji dalsze przewijanie dużych zbiorów danych.
Konfigurowanie aplikacji Vue
Aby postępować zgodnie z tym samouczkiem, potrzebujesz podstawowej wiedzy na temat Vue 3 i JavaScript. Powinieneś wiedzieć, jak się zachować Żądania HTTP z Axios.
Aby zacząć się uczyć zaimplementuj nieskończone przewijanie, utwórz nową aplikację Vue, uruchamiając następujące polecenie np polecenie w preferowanym katalogu:
npm create vue
Podczas konfiguracji projektu Vue wyświetli monit o wybranie ustawienia wstępnego dla Twojej aplikacji. Wybierać NIE dla wszystkich funkcji, ponieważ nie będziesz potrzebować żadnych dodatków do swojej aplikacji.
Po utworzeniu nowej aplikacji przejdź do katalogu aplikacji i uruchom następujące polecenie
np polecenie instalacji niezbędnych pakietów:npm install axios @iconify/vue @vueuse/core
The np polecenie instaluje trzy pakiety: osie (dla żądań HTTP), @iconify/vue (dla łatwej integracji ikon w Vue), I @vueuse/core (oferując podstawowe narzędzia Vue).
użyjesz osie I @iconify/vue do pobierania danych i dodawania ikon do aplikacji. @vueuse/core zawiera narzędzia Vue, w tym użyj nieskończonego przewijania składnik do osiągnięcia nieskończonego przewijania.
Pobieranie fikcyjnych danych z interfejsu API JSONPlaceholder
Aby zaimplementować funkcję nieskończonego przewijania, potrzebujesz danych. Możesz zakodować te dane na stałe lub uzyskać dane z bezpłatnego fałszywego źródła API, takiego jak JSONPlaceholder.
Pobieranie tych danych z JSONPlaceholder imituje rzeczywiste scenariusze, ponieważ większość aplikacji internetowych pobiera dane z baz danych zamiast danych zakodowanych na stałe.
Aby pobrać dane z interfejsu API dla swojej aplikacji Vue, utwórz nowy folder w swoim źródło katalog i nazwij go interfejs API. W tym folderze utwórz nowy plik JavaScript i wklej następujący kod:
//getComments.jsimport axios from"axios";
asyncfunctiongetComments(max, omit) {
try {
const comments = await axios.get(
`https://jsonplaceholder.typicode.com/comments? _limit=${max}&_start=${omit}`
);
return comments.data.map((comment) => comment.body);
} catch (error) {
console.error(error);
}
}
exportdefault getComments;
Fragment kodu składa się z funkcji asynchronicznej do pobierania komentarzy z punktu końcowego interfejsu API " https://jsonplaceholder.typicode.com/comments". Następnie eksportuje funkcję.
Aby wyjaśnić dokładniej, fragment kodu rozpoczyna się od zaimportowania pliku osie biblioteka. Następnie kod definiuje pobierz komentarze funkcja z dwoma argumentami: maks I pomijać.
The pobierz komentarze funkcja mieści axios.get() metoda, która wysyła żądanie GET do adresu URL. Adres URL zawiera parametry zapytania maks I pomijać, które są interpolowane w łańcuchu przy użyciu literałów szablonowych (``). Pozwala to na przekazywanie wartości dynamicznych do adresu URL.
Następnie funkcja zwraca nową tablicę składającą się z ciało komentarzy otrzymanych z punktu końcowego API za pomocą mapa funkcjonować.
Jeśli wystąpi jakikolwiek błąd, fragment kodu rejestruje go w konsoli. Następnie fragment kodu eksportuje tę funkcję do innych części aplikacji.
Teraz, gdy poradziłeś sobie z logiką pobierania fałszywych danych, możesz utworzyć nowy komponent do wyświetlania fałszywych danych i obsługi funkcji nieskończonego przewijania.
Utwórz nowy plik InfiniteScroll.vue w źródło/komponenty katalog i dodaj następujący kod: