pengenalan

Kami melihat penatalan yang tidak terhingga dalam aplikasi dan halaman web terutamanya media sosial yang mahu kami hanya menatal. Walaupun menatal tanpa berfikir adalah tidak baik, membina tatal tak terhingga anda sendiri adalah hebat. Sebagai pembangun, kita harus cuba mencipta semula komponen yang kita lihat semasa melayari web. Ia boleh mencabar anda untuk mempelajari lebih lanjut dan berfikir di luar kotak apabila melaksanakan beberapa komponen.

Selain itu, Jika anda ingin melaksanakan tatal tak terhingga dalam aplikasi anda maka anda boleh mengikuti panduan untuk mencipta tatal anda sendiri. Anda boleh menambah kod anda sendiri untuk meningkatkan tingkah laku skrol.

Dalam artikel ini, kami akan membina komponen skrol tak terhingga dari awal. Ia akan merangkumi topik berikut:

• Persediaan Alam Sekitar
• Membina Komponen
• Menambah CSS
• Mengoptimumkan Tatal Tak Terhingga

Sekarang, mari kita mulakan.

Persediaan Persekitaran

Kami akan menggunakan CRA untuk mencipta aplikasi React asas. Anda boleh melakukannya dengan menjalankan arahan berikut:

npx create-react-app infinite-scroll

Jika anda ingin Vite atau NextJS maka anda juga boleh. Selain daripada perubahan kecil perkara lain akan tetap sama.

Nota: Untuk menjalankan arahan ini, anda perlu mempunyai prapasang NodeJS. Juga, keluarkan beberapa kod boilerplate yang tidak diperlukan daripada CRA.

Kami akan memerlukan satu pergantungan untuk mengambil data daripada API. Selepas menetapkan React, kita boleh memasang Axios dengan arahan berikut:

npm install axios

Kini, kami bersedia untuk mencipta komponen tersebut.

Komponen Apl

Kami akan membina komponen yang akan mengambil data filem popular daripada Tmdb API. Ia percuma anda boleh mendapatkan kunci API mereka daripada tapak web mereka. Mari bina dahulu tempat mereka mengambil data dan kemudian tambahkan ciri tatal yang tidak terhingga.

Berikut ialah kod untuk Komponen Apl:

App.js

import "./App.css"; import { useState, useEffect } from "react"; import axios from "axios"; import { MovieCard } from "./MovieCard"; function App() { const [page, setPage] = useState(1); // for number of page in tmdb const [data, setData] = useState([]); // storing the fetched data const [loading, setLoading] = useState(false); // for setting loading state // fetching and stroring the data in the state const fetchMovie = async () => { const URL = `https://api.themoviedb.org/3/movie/popular?language=en-US&page=${page}`; const data = await axios.get(URL, { headers: { Authorization: "Bearer API KEY", Accept: "application/json", }, }); setData((prevData) => [...prevData, ...data.data.results]); // we are going to add the new data to current data. setLoading(false); }; // useEffecte for invoking the function at the start useEffect(() => { fetchMovie(); }, [page]); return ( 
 
 Popular movies according to Tmdb 
 {data.length > 1 && data.map((item) => { return (  ); })} {loading && 
Loading....
} 
 
 
 ); } export default App;

Anda boleh memahami kod tersebut, tempat kami mengambil data dan menghantarnya ke dalam komponen MovieCard sebagai prop.

Buat komponen MovieCard.js untuk memaparkan maklumat setiap filem.

MoveCard.js

import React from "react"; export const MovieCard = ({ title, description, imageURL, rating }) => { const imagePath = `https://image.tmdb.org/t/p/w500${imageURL}`; // poster image path URL return ( 
  
 
{title}
 
{description}
 
{rating.toFixed(1)}⭐
 
 
 ); };

Berikut ialah CSS aplikasi:

App.css

.App { text-align: center; } .App-header { background-color: #282c34; min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding-top: 1em; font-size: calc(10px + 2vmin); color: white; } .movieCardContainer{ margin-top: 1em; display: flex; flex-direction: column; gap: 1em; width: 60%; max-width: 800px; } .movieCard{ display: flex; } .movieInfo{ margin-left: 1em; text-align: left; } p{ font-size: 18px; }

Tatal Tak Terhingga

Sekarang, mari kita fahami bagaimana kita akan membina skrol tak terhingga. Untuk ini, kita akan melihat kedudukan bar skrol. Apabila kedudukan bar skrol berada di atas hujung halaman, kami akan menetapkan keadaan pemuatan kepada benar.

Kami akan mempunyai useEffect lain yang akan menambah keadaan halaman sebanyak 1. Setelah nombor halaman dikemas kini, useEffect awal yang mempunyai halaman sebagai kebergantungan akan dicetuskan. Ini akan menggunakan fungsi fetchMovie() untuk mengambil data.

Menambah EventListner pada Tatal

Pertama, kami akan menambah walaupun mendengar untuk mengetahui apabila kedudukan bar skrol ditukar.

window.addEventListener("scroll", handleScroll);

pemegangSkrol

Apabila tatal berlaku, kami akan menyemak sama ada kedudukan bar scoll semasa berada tepat di atas bahagian bawah halaman web (iaitu jumlah kawasan boleh tatal menegak). Jika ya maka kami sedang menukar keadaan pemuatan kepada benar.

const handleScroll = () => { if (document.body.scrollHeight - 300 < window.scrollY + window.innerHeight) { setLoading(true); } };

• scrollHeight : Ia adalah sifat yang mengembalikan jumlah ketinggian kandungan, termasuk bahagian yang tidak kelihatan pada skrin. Jadi, ia akan menjadi jumlah kawasan boleh tatal.
• scrollY: Ia adalah sifat yang mengembalikan bilangan piksel yang dokumen itu telah ditatal secara menegak dari atas. Jadi ia akan menjadi kawasan yang telah ditatal.
• innerHeight: Ia adalah harta yang mengembalikan ketinggian kawasan kandungan Windows penyemak imbas. Ia akan menjadi lebar bar skrol. Ia ditambahkan pada skrolY supaya pengambilan berlaku apabila kami mencapai kandungan dan bukannya apabila kami lulus kandungan. ## useEffect

Selepas berjaya menukar keadaan pemuatan, kami boleh melaksanakan useEffect untuk menambah nombor halaman. Supaya, pengambilan data filem boleh berlaku.

useEffect(() => { if (loading == true) { setPage((prevPage) => prevPage + 1); } }, [loading]); // other useEffect that we already implemented useEffect(() => { fetchMovie(); }, [page]);

Mengoptimumkan eventListner

Memandangkan skrol boleh mencetuskan handleScroll beberapa kali semasa menatal, ia akan menyebabkan seruan fungsi yang tidak perlu beberapa kali. Kita boleh menambah nyahlantun pada fungsi supaya ia boleh mengambil sedikit masa sebelum menggunakan fungsi tersebut.

// debounce function function debounce(func, delay) { let timeoutId; return function (...args) { if (timeoutId) { clearTimeout(timeoutId); } timeoutId = setTimeout(() => { func(...args); }, delay); }; } // adding debounce to the eventListner window.addEventListener("scroll", debounce(handleScroll, 500));

Berikut ialah kod lengkap App.js:

import "./App.css"; import { useState, useEffect } from "react"; import axios from "axios"; import { MovieCard } from "./MovieCard"; function App() { const [page, setPage] = useState(1); const [data, setData] = useState([]); const [loading, setLoading] = useState(false); const fetchMovie = async () => { const URL = `https://api.themoviedb.org/3/movie/popular?language=en-US&page=${page}`; const data = await axios.get(URL, { headers: { Authorization: "Bearer API KEY", Accept: "application/json", }, }); setData((prevData) => [...prevData, ...data.data.results]); setLoading(false); }; useEffect(() => { fetchMovie(); }, [page]); const handleScroll = () => { if ( document.body.scrollHeight - 300 < window.scrollY + window.innerHeight ) { setLoading(true); } }; function debounce(func, delay) { let timeoutId; return function (...args) { if (timeoutId) { clearTimeout(timeoutId); } timeoutId = setTimeout(() => { func(...args); }, delay); }; } window.addEventListener("scroll", debounce(handleScroll, 500)); useEffect(() => { if (loading == true) { setPage((prevPage) => prevPage + 1); } }, [loading]); return ( 
 
 Popular movies according to Tmdb 
 {data.length > 1 && data.map((item) => { return (  ); })} {loading && 
Loading....
} 
 
 
 ); } export default App;

Berikut ialah GIF yang menunjukkan cara kerja aplikasi.

Abschluss

Der Aufbau einer Infinite-Scroll-Komponente in React kann eine äußerst lohnende Erfahrung sein. Es verbessert nicht nur Ihr Verständnis der Funktionsweise des Scrollens, sondern bringt Ihnen auch etwas über Zustandsverwaltung, Ereignis-Listener und Optimierungstechniken wie Entprellen bei. Wenn Sie dieser Anleitung folgen, verfügen Sie nun über ein grundlegendes Infinite-Scroll-Setup, das Sie entsprechend Ihren Anforderungen anpassen und verbessern können.

Ob Sie Filmdaten, Blogbeiträge oder andere Inhalte anzeigen, diese Komponente dient als solide Grundlage. Denken Sie daran, dass der Schlüssel darin liegt, ein reibungsloses Benutzererlebnis zu gewährleisten, indem Sie sorgfältig verwalten, wann und wie Daten abgerufen werden, während der Benutzer scrollt. Viel Spaß beim Codieren!

Atas ialah kandungan terperinci Membina Komponen Tatal Infinite dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!