نحوه پیاده سازی اسکرول بی نهایت در Vue

اسکرول بی نهایت زمانی مفید است که نیاز به نمایش مجموعه داده های بزرگ در برنامه خود دارید. نحوه پیاده سازی آن در Vue را بیاموزید.

اسکرول بی نهایت تکنیکی است که می توانید از آن برای نمایش محتوای بیشتر در حین حرکت کاربر برنامه به پایین صفحه استفاده کنید. نیاز به صفحه‌بندی را از بین می‌برد و به کاربران برنامه اجازه می‌دهد تا به پیمایش در مجموعه داده‌های بزرگ ادامه دهند.

راه اندازی برنامه Vue شما

برای دنبال کردن این آموزش، به درک اولیه Vue ۳ و JavaScript نیاز دارید. شما باید بدانید که چگونه با Axios درخواست های HTTP را مدیریت کنید.

برای شروع یادگیری نحوه پیاده سازی اسکرول بی نهایت، با اجرای دستور npm زیر در فهرست دلخواه خود، یک برنامه Vue جدید ایجاد کنید:

npm create vue

در طول راه اندازی پروژه، Vue از شما می خواهد که یک پیش تنظیم برای برنامه خود انتخاب کنید. برای همه ویژگی‌ها خیر را انتخاب کنید، زیرا نیازی به افزودن به برنامه خود ندارید.

پس از ایجاد برنامه جدید، به دایرکتوری برنامه بروید و دستور npm زیر را برای نصب بسته های لازم اجرا کنید:

npm install axios @iconify/vue @vueuse/core

دستور npm سه بسته را نصب می‌کند: axios (برای درخواست‌های HTTP)، @iconify/vue (برای ادغام آسان نمادها در Vue)، و @vueuse/core (ارائه ابزارهای ضروری Vue).

شما از axios و @iconify/vue برای واکشی داده ها و افزودن آیکون ها به برنامه خود استفاده خواهید کرد. @vueuse/core شامل ابزارهای Vue، از جمله مولفه useInfiniteScroll برای دستیابی به اسکرول بی نهایت است.

واکشی داده های ساختگی از JSONPlaceholder API

برای پیاده سازی تابع اسکرول بی نهایت، به داده نیاز دارید. می‌توانید این داده‌ها را کدنویسی کنید یا از یک منبع جعلی API مانند JSONPlaceholder، داده‌ها را دریافت کنید.

دریافت این داده‌ها از JSONPlaceholder سناریوهای واقعی را تقلید می‌کند، زیرا اکثر برنامه‌های کاربردی وب، داده‌ها را به جای داده‌های کدگذاری سخت از پایگاه‌های داده دریافت می‌کنند.

برای واکشی داده ها از API برای برنامه Vue خود، یک پوشه جدید در پوشه src خود ایجاد کنید و نام آن را api بگذارید. در آن پوشه، یک فایل جاوا اسکریپت جدید ایجاد کنید و کد زیر را در آن قرار دهید:

//getComments.js

import axios from "axios";

async function getComments(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);
  }
}

export default getComments;

قطعه کد از یک تابع ناهمزمان برای دریافت نظرات از نقطه پایانی API “https://jsonplaceholder.typicode.com/comments” تشکیل شده است. سپس تابع را صادر می کند.

برای توضیح بیشتر، قطعه کد با وارد کردن کتابخانه axios شروع می شود. سپس کد تابع getComments را با دو آرگومان تعریف می کند: max و omit.

تابع getComments متد axios.get() را در خود جای داده است که یک درخواست GET به URL می دهد. URL حاوی پارامترهای پرس و جو حداکثر و حذف است که با استفاده از حروف الفبای الگو (“) در رشته درونیابی می شوند. این به شما امکان می دهد مقادیر پویا را به URL منتقل کنید.

سپس تابع یک آرایه جدید متشکل از بدنه نظرات دریافت شده از نقطه پایانی API را با استفاده از تابع نقشه برمی گرداند.

اگر خطایی رخ دهد، قطعه کد آن را به کنسول ثبت می‌کند. سپس قطعه کد این تابع را به قسمت های دیگر برنامه شما صادر می کند.

ایجاد مؤلفه اسکرول بی نهایت

اکنون که منطق واکشی داده‌های ساختگی را کنترل کرده‌اید، می‌توانید یک مؤلفه جدید برای نمایش داده‌های ساختگی ایجاد کنید و عملکرد اسکرول بی‌نهایت را مدیریت کنید.

یک فایل جدید InfiniteScroll.vue در پوشه src/components ایجاد کنید و کد زیر را اضافه کنید:

<!-- InfiniteScroll.vue -->
<script setup>
import { ref } from "vue";
import getComments from "../api/getComments";
import { useInfiniteScroll } from "@vueuse/core";

const listEl = ref(null);

const commentsDisplayed = 20;
const commentsList = ref(await getComments(commentsDisplayed, 0));

const commentsToDisplayOnScroll = async () => {
  const newComments = await getComments(
    commentsDisplayed,
    commentsList.value.length
  );

  commentsList.value.push(...newComments);
};

useInfiniteScroll(
  listEl,
  async () => {
    await commentsToDisplayOnScroll();
  },
  { distance: 10 }
);
</script>

قطعه کد بالا بلوک اسکریپت مولفه InfiniteScroll را توصیف می کند.

قطعه کد توابع ref و useInfiniteScroll را به ترتیب از vue و @vueuse/core وارد می کند. این قطعه همچنین تابع getComments را از فایل getComments.js وارد می کند.

سپس قطعه یک مرجع listEl با تابع ref ایجاد می کند. listEl به عنصر DOM با قابلیت اسکرول بی نهایت ارجاع می دهد.

متغیر commentsDisplayed نشان دهنده تعداد نظراتی است که در ابتدا در صفحه نمایش داده می شود. commentsList آرایه نظراتی را که قطعه کد با تابع getComments واکشی می کند، نگه می دارد.

قطعه یک تابع ناهمزمان commentsToDisplayOnScroll تعریف می کند که نظرات جدید را با تابع getComments واکشی می کند و آنها را به آرایه commentsList موجود با عملگر spread (…) اضافه می کند.

در نهایت، قطعه کد تابع useInfiniteScroll را فراخوانی می کند تا رفتار اسکرول بی نهایت را با سه آرگومان فعال کند:

• مرجع عنصر DOM (listEl) فهرستی را نشان می دهد که کاربر برنامه در آن پیمایش می کند.
• یک فراخوانی تابع ناهمگام زمانی که کاربر پیمایش می کند تا واکشی نظرات جدید و الحاق آنها به فهرست نظرات را آغاز کند.
• یک شی پیکربندی اختیاری با خصوصیات. شی { distance: ۱۰ } مشخص می کند که نظرات جدید زمانی شروع به بارگیری کنند که کاربر ۱۰ پیکسل از انتهای لیست فاصله داشته باشد.

با استفاده از مولفه اسکرول بی نهایت

پس از مدیریت منطق اسکرول بی نهایت در بلوک اسکریپت مؤلفه InfiniteScroll، باید محتوا را در بلوک الگو رندر کنید.

بلوک کد زیر را در مؤلفه InfiniteScroll خود قرار دهید:

<!-- InfiniteScroll.vue -->
<template>
  <div>
    <ul ref="listEl">
      <li v-for="comment in commentsList">
        {{ comment }}
      </li>
    </ul>
  </div>
</template>

این بلوک کد الگوی یک مؤلفه Vue را که مسئول ارائه لیستی از نظرات است، تعریف می کند.

عنصر

مجموعه‌ای از عناصر
• تولید شده با دستور v-for (برای رندر کردن لیست‌ها) را نگه می‌دارد که روی آرایه commentsList تکرار می‌شود.

  هر نظر از آرایه با استفاده از درون یابی داده ها ({{ comment }}) در یک عنصر

• نمایش داده می شود. بلوک کد مرجع listEl را به
  اختصاص می دهد تا عملکرد اسکرول بی نهایت را فعال کند.

  سپس، می‌توانید از مؤلفه InfiniteScroll در فایل App.vue خود استفاده کنید.

  <!-- App.vue -->
  
  <script setup>
  import InfiniteScroll from "./components/InfiniteScroll.vue";
  import { Icon } from "@iconify/vue";
  </script>
  
  <template>
    <Suspense>
      <InfiniteScroll />
      <template #fallback>
        <Icon icon="eos-icons:bubble-loading" width="250" height="250" />
      </template>
    </Suspense>
  </template>
  

  بلوک کد بالا مولفه اسکرول بی نهایت و مؤلفه نماد را وارد می کند. سپس مولفه Infinite Scroll را در یک جزء Suspense می پیچد.

  مؤلفه Suspense به شما امکان می‌دهد تا محتوای بازگشتی (یک نماد) را در حالی که Vue تمام توابع ناهمزمان را در مؤلفه InfiniteScroll حل می‌کند، ارائه دهید.

  اکنون، می توانید با اجرای دستور npm run dev در فهرست برنامه، پیش نمایش برنامه خود را مشاهده کنید. شما باید یک رابط مشابه با تصویر زیر ببینید:

  

  با تنظیم متغیر commentsToBeDisplayed روی ۱۰، پیش‌نمایش بالا ده نظر را نشان می‌دهد. با اسکرول کردن به پایین، برنامه نظرات بیشتری را برای خواندن بارگیری می‌کند.

  تکنیک اسکرول بی نهایت در بین برنامه های کاربردی وب، به ویژه در برنامه های رسانه های اجتماعی مانند X و Tiktok محبوب است.

  این تکنیک تضمین می‌کند که کاربران برنامه با دریافت مداوم داده‌های بیشتر درگیر می‌شوند و جریانی رو به گسترش از محتوا را برای خواندن، یادگیری و تماشا در اختیار آنها قرار می‌دهد و در نتیجه علاقه‌شان را برانگیخته نگه می‌دارد.

  آموزش استفاده مجدد از اجزای Vue با اسلات ها

  شما یاد گرفته اید که چگونه تکنیک اسکرول بی نهایت را با مولفه useInfiniteScroll موجود در VueUse پیاده سازی کنید.

  در وب‌سایت‌های امروزی، رندر کردن مؤلفه‌های مشابه با محتوای HTML متفاوت رایج است. می‌توانید یاد بگیرید که از مؤلفه‌های Vue استفاده مجدد کنید تا به این احساس سازگار در بخش‌های مختلف یک برنامه وب برسید.

  منبع مقاله