Vue-তে অসীম স্ক্রোলিং কীভাবে প্রয়োগ করবেন

আপনার মত পাঠকরা MUO সমর্থন করতে সাহায্য করে। আপনি যখন আমাদের সাইটে লিঙ্ক ব্যবহার করে একটি ক্রয় করেন, আমরা একটি অনুমোদিত কমিশন উপার্জন করতে পারি। আরও পড়ুন

অসীম স্ক্রোলিং হল এমন একটি কৌশল যা আপনি আপনার অ্যাপ ব্যবহারকারী পৃষ্ঠার নিচে স্ক্রোল করার সাথে সাথে আরও সামগ্রী প্রদর্শন করতে ব্যবহার করতে পারেন। এটি পেজিনেশনের প্রয়োজনীয়তা দূর করে এবং অ্যাপ ব্যবহারকারীদের বড় ডেটা সেটের মাধ্যমে স্ক্রোল করা চালিয়ে যেতে দেয়।

দিনের MUO ভিডিও কন্টেন্টের সাথে চালিয়ে যেতে স্ক্রোল করুন

আপনার Vue অ্যাপ্লিকেশন সেট আপ করা হচ্ছে

এই টিউটোরিয়ালটি অনুসরণ করার জন্য, আপনার Vue 3 এবং জাভাস্ক্রিপ্ট সম্পর্কে একটি প্রাথমিক বোঝার প্রয়োজন। আপনি কিভাবে হ্যান্ডেল করতে জানতে হবে Axios-এর সাথে HTTP অনুরোধ .

কিভাবে শিখতে শুরু করতে অসীম স্ক্রোলিং বাস্তবায়ন , নিম্নলিখিতটি চালিয়ে একটি নতুন Vue অ্যাপ তৈরি করুন npm আপনার পছন্দের ডিরেক্টরিতে কমান্ড:

 npm create vue

প্রজেক্ট সেটআপের সময়, Vue আপনাকে আপনার অ্যাপের জন্য একটি প্রিসেট নির্বাচন করতে বলবে। পছন্দ করা না সমস্ত বৈশিষ্ট্যের জন্য, কারণ আপনার অ্যাপে কোনো সংযোজনের প্রয়োজন হবে না।

একবার আপনি নতুন অ্যাপ তৈরি করলে, অ্যাপের ডিরেক্টরিতে নেভিগেট করুন এবং নিম্নলিখিতটি চালান npm প্রয়োজনীয় প্যাকেজ ইনস্টল করার জন্য কমান্ড:

 npm install axios @iconify/vue @vueuse/core

দ্য npm কমান্ড তিনটি প্যাকেজ ইনস্টল করে: অক্ষ (HTTP অনুরোধের জন্য), @iconify/vue (Vue-তে সহজ আইকন ইন্টিগ্রেশনের জন্য) , এবং @ভিউ/কোর (প্রয়োজনীয় Vue ইউটিলিটি অফার করছে)।

আপনি ব্যবহার করবেন অক্ষ এবং @iconify/vue ডেটা আনতে এবং আপনার অ্যাপ্লিকেশনে আইকন যোগ করতে। @ভিউ/কোর Vue ইউটিলিটি রয়েছে, সহ InfiniteScroll ব্যবহার করুন অসীম স্ক্রোলিং অর্জনের জন্য উপাদান।

JSONPlaceholder API থেকে ডামি ডেটা আনা হচ্ছে

অসীম স্ক্রোলিং ফাংশন বাস্তবায়ন করতে, আপনার ডেটা প্রয়োজন। আপনি এই ডেটাগুলিকে হার্ড কোড করতে পারেন বা একটি বিনামূল্যের জাল API উত্স থেকে ডেটা পেতে পারেন JSON প্লেসহোল্ডার .

JSONPlaceholder থেকে এই ডেটা পাওয়া বাস্তব-জীবনের পরিস্থিতির অনুকরণ করে, কারণ বেশিরভাগ ওয়েব অ্যাপ্লিকেশন হার্ড-কোডেড ডেটার পরিবর্তে ডেটাবেস থেকে ডেটা পায়।

আপনার Vue অ্যাপ্লিকেশনের জন্য API থেকে ডেটা আনতে, আপনার একটি নতুন ফোল্ডার তৈরি করুন src ডিরেক্টরি এবং নাম দিন এপিআই . সেই ফোল্ডারে, একটি নতুন জাভাস্ক্রিপ্ট ফাইল তৈরি করুন এবং নিম্নলিখিত কোডটি পেস্ট করুন:

 //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.get() পদ্ধতি যা URL এ একটি GET অনুরোধ করে। URL-এ ক্যোয়ারী প্যারামিটার রয়েছে সর্বোচ্চ এবং বর্জন করা , যা টেমপ্লেট লিটারেল ব্যবহার করে স্ট্রিং এর মধ্যে প্রসারিত হয় ( `` ) এটি আপনাকে ইউআরএলে গতিশীল মান পাস করতে দেয়।

ফাংশন তারপর একটি নতুন অ্যারে প্রদান করে যার মধ্যে রয়েছে শরীর API এন্ডপয়েন্ট ব্যবহার করে প্রাপ্ত মন্তব্যগুলির মধ্যে মানচিত্র ফাংশন

আমি যা পছন্দ করি তার উপর ভিত্তি করে টিভি শো সুপারিশ করি

যদি কোনো ত্রুটি ঘটে, কোড স্নিপেট এটি কনসোলে লগ করে। কোড স্নিপেট তারপর এই ফাংশনটি আপনার অ্যাপ্লিকেশনের অন্যান্য অংশে রপ্তানি করে।

অসীম স্ক্রোল উপাদান তৈরি করা

এখন যেহেতু আপনি ডামি ডেটা আনার জন্য লজিক পরিচালনা করেছেন, আপনি ডামি ডেটা প্রদর্শন করতে এবং অসীম স্ক্রোলিং ফাংশন পরিচালনা করতে একটি নতুন উপাদান তৈরি করতে পারেন।

একটি নতুন ফাইল তৈরি করুন InfiniteScroll.vue মধ্যে src/কম্পোনেন্ট ডিরেক্টরি এবং নিম্নলিখিত কোড যোগ করুন:

 <!-- 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 উপাদান.

কোড স্নিপেট আমদানি করে রেফ এবং InfiniteScroll ব্যবহার করুন থেকে ফাংশন দেখুন এবং @ভিউ/কোর , যথাক্রমে। স্নিপেটটিও আমদানি করে মন্তব্য পান থেকে ফাংশন getComments.js ফাইল

তারপর, স্নিপেট একটি তৈরি করে listEl সঙ্গে রেফারেন্স রেফ ফাংশন listEl অসীম স্ক্রোল কার্যকারিতা সহ DOM উপাদান উল্লেখ করে।

দ্য মন্তব্য প্রদর্শিত ভেরিয়েবল পৃষ্ঠায় প্রাথমিকভাবে প্রদর্শিত মন্তব্যের সংখ্যা উপস্থাপন করে। মন্তব্য তালিকা কোড স্নিপেট এর সাথে পাওয়া মন্তব্যের অ্যারে ধরে রাখে মন্তব্য পান ফাংশন

স্নিপেট একটি সংজ্ঞায়িত করে কমেন্টসটু ডিসপ্লেঅনস্ক্রোল অ্যাসিঙ্ক্রোনাস ফাংশন যা এর সাথে নতুন মন্তব্য নিয়ে আসে মন্তব্য পান ফাংশন এবং তাদের বিদ্যমান সাথে যুক্ত করে মন্তব্য তালিকা স্প্রেড অপারেটরের সাথে অ্যারে ( ... )

সেরা সংবাদ উৎস কি

অবশেষে, কোড স্নিপেট আমন্ত্রণ জানায় InfiniteScroll ব্যবহার করুন তিনটি আর্গুমেন্ট গ্রহণ করে অসীম স্ক্রলিং আচরণ সক্ষম করতে ফাংশন:

DOM উপাদান ( listEl ) রেফারেন্স সেই তালিকার প্রতিনিধিত্ব করে যা অ্যাপ ব্যবহারকারী স্ক্রোল করবে।
একটি অ্যাসিঙ্ক ফাংশন কল যখন ব্যবহারকারী স্ক্রোল করে নতুন মন্তব্যগুলি আনার জন্য এবং সেগুলিকে যুক্ত করতে ট্রিগার করে মন্তব্য তালিকা .
বৈশিষ্ট্য সহ একটি ঐচ্ছিক কনফিগারেশন অবজেক্ট। বস্তু {দূরত্ব: 10} নির্দিষ্ট করে যে নতুন মন্তব্যগুলি লোড হওয়া শুরু করা উচিত যখন ব্যবহারকারী তালিকার নীচে থেকে 10 পিক্সেল দূরে থাকে৷

অসীম স্ক্রোল উপাদান ব্যবহার করে

এর স্ক্রিপ্ট ব্লকে অসীম স্ক্রলিং লজিক পরিচালনা করার পরে InfiniteScroll কম্পোনেন্ট, আপনাকে টেমপ্লেট ব্লকে বিষয়বস্তু রেন্ডার করতে হবে।

আপনার নিম্নলিখিত কোড ব্লক আটকান InfiniteScroll উপাদান:

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

এই কোড ব্লক মন্তব্যের একটি তালিকা রেন্ডার করার জন্য দায়ী একটি Vue উপাদানের জন্য টেমপ্লেটকে সংজ্ঞায়িত করে।

দ্য

<তা>

মন্তব্য তালিকা

অ্যারে থেকে প্রতিটি মন্তব্য একটি মধ্যে প্রদর্শিত হয় <তা> ডেটা ইন্টারপোলেশন ব্যবহার করে উপাদান ( {{ মন্তব্য }} ) কোড ব্লক বরাদ্দ করে 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>

উপরের কোড ব্লকটি আমদানি করে InfiniteScroll উপাদান এবং আইকন উপাদান. এটি তারপর wraps InfiniteScroll উপাদান a সাসপেন্স উপাদান.

দ্য সাসপেন্স কম্পোনেন্ট আপনাকে ফলব্যাক কন্টেন্ট (একটি আইকন) রেন্ডার করতে দেয় কারণ Vue-এর সমস্ত অ্যাসিঙ্ক্রোনাস ফাংশন সমাধান করে InfiniteScroll উপাদান.

এখন, আপনি কমান্ডটি চালিয়ে আপনার অ্যাপ্লিকেশনটির পূর্বরূপ দেখতে পারেন npm রান dev অ্যাপের ডিরেক্টরিতে। আপনি নীচের ছবির অনুরূপ ইন্টারফেস দেখতে হবে:

উপরের প্রিভিউ আপনি সেট হিসাবে দশ মন্তব্য প্রদর্শন করে মন্তব্যটি প্রদর্শন করা হয়েছে পরিবর্তনশীল 10। আপনি নিচে স্ক্রোল করার সাথে সাথে অ্যাপটি পড়ার জন্য আরও মন্তব্য লোড করে।

অসীম স্ক্রোল কৌশলটি ওয়েব অ্যাপ্লিকেশনগুলির মধ্যে জনপ্রিয়, বিশেষ করে X এবং Tiktok-এর মতো সোশ্যাল মিডিয়া অ্যাপগুলিতে৷

এই কৌশলটি নিশ্চিত করে যে অ্যাপ ব্যবহারকারীরা নিযুক্ত থাকবেন কারণ এটি ক্রমাগত আরও ডেটা আনয়ন করে, তাদের পড়ার, শেখার এবং দেখার জন্য সামগ্রীর একটি ক্রমবর্ধমান প্রবাহ প্রদান করে, এইভাবে তাদের আগ্রহ জাগিয়ে রাখে।

স্লটগুলির সাথে Vue উপাদানগুলি পুনরায় ব্যবহার করতে শিখুন

আপনি VueUse-এ উপলব্ধ useInfiniteScroll উপাদানের সাথে অসীম স্ক্রোল কৌশলটি কীভাবে প্রয়োগ করতে হয় তা শিখেছেন।

আধুনিক দিনের ওয়েবসাইটগুলিতে, বিভিন্ন HTML সামগ্রীর সাথে একই উপাদানগুলি রেন্ডার করা সাধারণ। আপনি একটি ওয়েব অ্যাপের বিভিন্ন অংশ জুড়ে এই সামঞ্জস্যপূর্ণ অনুভূতি অর্জন করতে Vue উপাদানগুলি পুনরায় ব্যবহার করতে শিখতে পারেন।