Pengguliran tak terbatas berguna saat Anda perlu menampilkan kumpulan data besar di aplikasi Anda. Pelajari cara mengimplementasikannya di Vue.
Pengguliran tak terbatas adalah teknik yang dapat Anda gunakan untuk menampilkan lebih banyak konten saat pengguna aplikasi Anda menggulir ke bawah halaman. Ini menghilangkan kebutuhan untuk paginasi dan memungkinkan pengguna aplikasi untuk terus menggulir kumpulan data besar.
Menyiapkan Aplikasi Vue Anda
Untuk mengikuti tutorial ini, Anda memerlukan pemahaman dasar tentang Vue 3 dan JavaScript. Anda harus tahu bagaimana menangani Permintaan HTTP dengan Axios.
Untuk mulai mempelajari caranya menerapkan pengguliran tak terbatas, buat aplikasi Vue baru dengan menjalankan perintah berikut npm perintah di direktori pilihan Anda:
npm create vue
Selama penyiapan proyek, Vue akan meminta Anda memilih preset untuk aplikasi Anda. Memilih TIDAK untuk semua fitur, karena Anda tidak memerlukan tambahan apa pun untuk aplikasi Anda.
Setelah Anda membuat aplikasi baru, navigasikan ke direktori aplikasi dan jalankan yang berikut ini
npm perintah untuk menginstal paket yang diperlukan:npm install axios @iconify/vue @vueuse/core
Itu npm perintah menginstal tiga paket: axios (untuk permintaan HTTP), @ iconify/vue (untuk integrasi ikon yang mudah di Vue), Dan @vueuse/core (menawarkan utilitas Vue penting).
Anda akan menggunakan axios Dan @ iconify/vue untuk mengambil data dan menambahkan ikon ke aplikasi Anda. @vueuse/core berisi utilitas Vue, termasuk gunakanInfiniteScroll komponen untuk mencapai pengguliran tak terbatas.
Mengambil Data Dummy Dari JSONPlaceholder API
Untuk mengimplementasikan fungsi pengguliran tak terbatas, Anda memerlukan data. Anda dapat membuat kode keras pada data ini atau mendapatkan data dari sumber API palsu gratis seperti JSONPlaceholder.
Mendapatkan data ini dari JSONPlaceholder meniru skenario kehidupan nyata, karena sebagian besar aplikasi web mendapatkan data dari database, bukan data hard-coded.
Untuk mengambil data dari API untuk aplikasi Vue Anda, buat folder baru di src direktori dan beri nama api. Di folder itu, buat file JavaScript baru dan rekatkan kode berikut:
//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;
Cuplikan kode terdiri dari fungsi asinkron untuk mendapatkan komentar dari titik akhir API " https://jsonplaceholder.typicode.com/comments". Ini kemudian mengekspor fungsi.
Untuk menjelaskan lebih lanjut, cuplikan kode dimulai dengan mengimpor file axios perpustakaan. Kode kemudian mendefinisikan dapatkanKomentar fungsi dengan dua argumen: maks Dan menghilangkan.
Itu dapatkanKomentar fungsi menampung axios.get() metode yang membuat permintaan GET ke URL. URL berisi parameter kueri maks Dan menghilangkan, yang diinterpolasi dalam string menggunakan templat literal (``). Ini memungkinkan Anda untuk meneruskan nilai dinamis ke dalam URL.
Fungsi kemudian mengembalikan array baru yang terdiri dari tubuh komentar yang diterima dari titik akhir API menggunakan peta fungsi.
Jika terjadi kesalahan, cuplikan kode mencatatnya ke konsol. Cuplikan kode kemudian mengekspor fungsi ini ke bagian lain dari aplikasi Anda.
Sekarang setelah Anda menangani logika untuk mengambil data dummy, Anda dapat membuat komponen baru untuk menampilkan data dummy dan menangani fungsi pengguliran tak terbatas.
Buat berkas baru InfiniteScroll.vue dalam src/komponen direktori dan tambahkan kode berikut:
