مقدمة

نرى تمريرًا لا نهائيًا في التطبيقات وصفحات الويب وخاصة وسائل التواصل الاجتماعي التي تريد منا التمرير فقط. على الرغم من أن التمرير بلا تفكير ليس أمرًا جيدًا، إلا أن إنشاء التمرير اللانهائي الخاص بك يعد أمرًا رائعًا. كمطور، يجب أن نحاول إعادة إنشاء المكونات التي نراها أثناء تصفح الويب. يمكن أن يشكل تحديًا لك لمعرفة المزيد والتفكير خارج الصندوق عند تنفيذ بعض المكونات.

أيضًا، إذا كنت تتطلع إلى تنفيذ تمرير لا نهائي في تطبيقك، فيمكنك اتباع الدليل لإنشاء التمرير الخاص بك. يمكنك إضافة التعليمات البرمجية الخاصة بك لتحسين سلوك التمرير.

في هذه المقالة، سنقوم ببناء مكون تمرير لا نهائي من البداية. وسيتناول المواضيع التالية:

• إعداد البيئة
• بناء المكون
• إضافة CSS
• تحسين التمرير اللانهائي

الآن، دعونا نبدأ.

إعداد البيئة

سنستخدم CRA لإنشاء تطبيق React الأساسي. يمكنك القيام بذلك عن طريق تشغيل الأمر التالي:

    npx create-react-app infinite-scroll

إذا كنت ترغب في Vite أو NextJS، فيمكنك ذلك أيضًا. بصرف النظر عن التغييرات الطفيفة، ستبقى الأشياء الأخرى كما هي.

ملاحظة: لتشغيل هذا الأمر، يجب أن يكون NodeJS مثبتًا مسبقًا. قم أيضًا بإزالة بعض التعليمات البرمجية المعيارية غير الضرورية من CRA.

سنحتاج إلى تبعية واحدة لجلب البيانات من واجهة برمجة التطبيقات. بعد ضبط React يمكننا تثبيت Axios بالأمر التالي:

    npm install axios

الآن، نحن جاهزون لإنشاء المكون.

مكون التطبيق

سنقوم ببناء مكون سيجلب بيانات الأفلام الشائعة من Tmdb API. إنه مجاني ويمكنك الحصول على مفتاح API الخاص بهم من موقعهم على الويب. دعونا نبني أولاً المكان الذي يتم جلب البيانات فيه ثم نضيف ميزات التمرير اللانهائية.

إليك الكود الخاص بمكون التطبيق:

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;

يمكنك فهم الكود إلى حد كبير، حيث نقوم بجلب البيانات وتمريرها إلى مكون MovieCard كدعم.

قم بإنشاء مكون MovieCard.js لعرض معلومات كل فيلم.

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)}⭐
          
        
      );
    };

هذا هو CSS للتطبيق:

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;
    }

التمرير اللانهائي

الآن، دعونا أولاً نفهم كيف سنقوم ببناء التمرير اللانهائي. لهذا، سوف ننظر إلى موضع شريط التمرير. عندما يكون موضع شريط التمرير أعلى نهاية الصفحة مباشرةً، فسنقوم بتعيين حالة التحميل على "صحيح".

سيكون لدينا تأثير استخدام آخر سيؤدي إلى زيادة حالة الصفحة بمقدار 1. بمجرد تحديث رقم الصفحة، سيتم تشغيل تأثير الاستخدام الأولي الذي يحتوي على الصفحة كتبعية. سيؤدي هذا إلى استدعاء الدالة fetchMovie() لجلب البيانات.

إضافة EventListner إلى Scroll

أولاً، سنقوم بإضافة الاستماع لمعرفة متى يتغير موضع شريط التمرير.

    window.addEventListener("scroll", handleScroll);

HandleScroll

عندما يحدث التمرير، سنتحقق مما إذا كان الموضع الحالي لشريط التنقل أعلى الجزء السفلي من صفحة الويب مباشرةً (أي إجمالي المساحة الرأسية القابلة للتمرير). إذا كانت الإجابة بنعم، فإننا نقوم بتغيير حالة التحميل إلى صحيح.

    const handleScroll = () => {
      if (document.body.scrollHeight - 300 

• scrollHeight : هي الخاصية التي تُرجع الارتفاع الإجمالي للمحتوى، بما في ذلك الجزء غير المرئي على الشاشة. لذلك، سيكون إجمالي المساحة القابلة للتمرير.
• scrollY: هي الخاصية التي تُرجع عدد البكسلات التي تم تمريرها في المستند عموديًا من الأعلى. لذلك ستكون المنطقة التي تم تمريرها.
• innerHeight: هي الخاصية التي تُرجع ارتفاع منطقة محتوى Windows في المتصفح. سيكون عرض شريط التمرير. تتم إضافته إلى التمرير Y بحيث يحدث الجلب عندما نصل إلى المحتوى وليس عندما نمرره. ## تأثير الاستخدام

بعد تغيير حالة التحميل بنجاح، يمكننا تنفيذ تأثير useEffect لزيادة رقم الصفحة. بحيث يمكن أن يتم جلب بيانات الفيلم.

    useEffect(() => {
      if (loading == true) {
        setPage((prevPage) => prevPage   1);
      }
    }, [loading]);

    // other useEffect that we already implemented

    useEffect(() => {
      fetchMovie();
    }, [page]);

تحسين EventListner

نظرًا لأن التمرير يمكن أن يؤدي إلى تشغيل HandleScroll عدة مرات أثناء التمرير، فسيتسبب في استدعاء غير ضروري للوظيفة عدة مرات. يمكننا إضافة ارتداد إلى الوظيفة بحيث يستغرق الأمر بعض الوقت قبل استدعاء الوظيفة.

    // 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));

إليك الكود الكامل لـ 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  {
            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;

هذه صورة GIF توضح طريقة عمل التطبيق.

خاتمة

يمكن أن يكون إنشاء مكون تمرير لا نهائي في React تجربة مجزية للغاية. إنه لا يعزز فهمك لكيفية عمل التمرير فحسب، بل يعلمك أيضًا إدارة الحالة ومستمعي الأحداث وتقنيات التحسين مثل الارتداد. باتباع هذا الدليل، لديك الآن إعداد أساسي للتمرير اللانهائي يمكنك تخصيصه وتحسينه وفقًا لاحتياجاتك.

سواء كنت تعرض بيانات الفيلم، أو منشورات المدونة، أو أي محتوى آخر، فإن هذا المكون بمثابة أساس قوي. تذكر أن المفتاح هو ضمان تجربة مستخدم سلسة من خلال الإدارة الدقيقة لوقت وكيفية جلب البيانات أثناء تمرير المستخدم. برمجة سعيدة!