Web Development Pull-to-Refresh এবং Infinite Scroll কনফিগার করা গাইড ও নোট

Framework7 মোবাইল এবং ওয়েব অ্যাপ্লিকেশনে Pull-to-Refresh এবং Infinite Scroll ফিচার সমর্থন করে। এগুলো সাধারণত ডেটা রিফ্রেশ এবং স্ক্রল করার সময় নতুন ডেটা লোড করতে ব্যবহৃত হয়।

Pull-to-Refresh কনফিগারেশন

Pull-to-Refresh ফিচার ব্যবহারকারীদের স্ক্রিন টেনে (pull) ডেটা রিফ্রেশ করার সুযোগ দেয়। এটি Framework7 এর বিল্ট-ইন ফিচার এবং সহজেই ব্যবহার করা যায়।

১. HTML স্ট্রাকচার

Pull-to-Refresh ফিচার যুক্ত করতে পৃষ্ঠার HTML এ .ptr-content ক্লাস যোগ করতে হবে।

<div class="page">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="title">Pull-to-Refresh Example</div>
    </div>
  </div>
  <div class="page-content ptr-content">
    <!-- Pull-to-Refresh loader -->
    <div class="ptr-preloader">
      <div class="preloader"></div>
      <div class="ptr-arrow"></div>
    </div>
    <div class="list">
      <ul id="data-list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  </div>
</div>

২. JavaScript ইভেন্ট হ্যান্ডলিং

Pull-to-Refresh ইভেন্ট পরিচালনা করতে Framework7 এর ptr:refresh ইভেন্ট ব্যবহার করা হয়।

var app = new Framework7();

var $= Dom7;

// Pull-to-Refresh ইভেন্ট হ্যান্ডলিং$('.ptr-content').on('ptr:refresh', function (e) {
  // নতুন ডেটা লোড করুন
  setTimeout(function () {
    var itemNumber = document.querySelectorAll('#data-list li').length + 1;
    $('#data-list').prepend('<li>Item ' + itemNumber + '</li>');

    // Refresh সম্পন্ন করুন
    app.ptr.done('.ptr-content');
  }, 1500); // ১.৫ সেকেন্ড পরে নতুন ডেটা যুক্ত হবে
});
</code></pre><hr><h3>Infinite Scroll কনফিগারেশন</h3><p><strong>Infinite Scroll</strong> ব্যবহারকারীরা যখন পৃষ্ঠার নিচে স্ক্রল করে তখন স্বয়ংক্রিয়ভাবে নতুন ডেটা লোড করার জন্য ব্যবহৃত হয়।</p><h4>১. HTML স্ট্রাকচার</h4><p>Infinite Scroll ফিচার যোগ করতে <code inline="">.infinite-scroll-content</code> এবং <code inline="">.infinite-scroll-preloader</code> ক্লাস ব্যবহার করতে হবে।</p><pre><code class="language-html"><div class="page">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="title">Infinite Scroll Example</div>
    </div>
  </div>
  <div class="page-content infinite-scroll-content" data-infinite-distance="50">
    <div class="list">
      <ul id="infinite-list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
    <!-- Preloader -->
    <div class="infinite-scroll-preloader">
      <div class="preloader"></div>
    </div>
  </div>
</div>
</code></pre><h4>২. JavaScript ইভেন্ট হ্যান্ডলিং</h4><p>Infinite Scroll পরিচালনা করতে Framework7 এর <code inline="">infinite</code> ইভেন্ট ব্যবহার করা হয়।</p><pre><code class="language-javascript">var app = new Framework7();

var$ = Dom7;

var loading = false; // ডেটা লোড হচ্ছে কিনা তা চেক করার জন্য

// Infinite Scroll ইভেন্ট হ্যান্ডলিং
$('.infinite-scroll-content').on('infinite', function () {
  if (loading) return; // যদি ইতিমধ্যে লোড হচ্ছে, তাহলে কিছু করবেন না
  loading = true;

  // নতুন ডেটা লোড করুন
  setTimeout(function () {
    var list =$('#infinite-list');
    for (var i = 0; i < 5; i++) {
      var itemNumber = list.find('li').length + 1;
      list.append('<li>Item ' + itemNumber + '</li>');
    }

    // লোডিং শেষ হলে স্টেট আপডেট করুন
    loading = false;
  }, 1500); // ১.৫ সেকেন্ড পরে নতুন ডেটা যুক্ত হবে
});

Pull-to-Refresh এবং Infinite Scroll একসঙ্গে ব্যবহার

Pull-to-Refresh এবং Infinite Scroll একসঙ্গে একটি পৃষ্ঠায় ব্যবহার করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো:

HTML

<div class="page">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="title">Pull-to-Refresh & Infinite Scroll</div>
    </div>
  </div>
  <div class="page-content ptr-content infinite-scroll-content" data-infinite-distance="50">
    <!-- Pull-to-Refresh loader -->
    <div class="ptr-preloader">
      <div class="preloader"></div>
      <div class="ptr-arrow"></div>
    </div>
    <div class="list">
      <ul id="combined-list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
    <!-- Infinite Scroll loader -->
    <div class="infinite-scroll-preloader">
      <div class="preloader"></div>
    </div>
  </div>
</div>

JavaScript

var app = new Framework7();
var $= Dom7;

// Pull-to-Refresh হ্যান্ডলিং$('.ptr-content').on('ptr:refresh', function () {
  setTimeout(function () {
    var itemNumber = document.querySelectorAll('#combined-list li').length + 1;
    $('#combined-list').prepend('<li>New Item ' + itemNumber + '</li>');
    app.ptr.done('.ptr-content');
  }, 1500);
});

// Infinite Scroll হ্যান্ডলিং
var loading = false;$('.infinite-scroll-content').on('infinite', function () {
  if (loading) return;
  loading = true;

  setTimeout(function () {
    var list = $$('#combined-list');
    for (var i = 0; i < 5; i++) {
      var itemNumber = list.find('li').length + 1;
      list.append('<li>Item ' + itemNumber + '</li>');
    }
    loading = false;
  }, 1500);
});

গুরুত্বপূর্ণ টিপস

1. Pull-to-Refresh এবং Infinite Scroll-এর মধ্যে পার্থক্য:
   • Pull-to-Refresh: ব্যবহারকারী স্ক্রিন টেনে ডেটা রিফ্রেশ করে।
   • Infinite Scroll: ব্যবহারকারী যখন স্ক্রল করে তখন স্বয়ংক্রিয়ভাবে নতুন ডেটা লোড হয়।
2. UX উন্নয়ন: ডেটা লোডিং এর সময় ব্যবহারকারীদের ভিজ্যুয়াল ইঙ্গিত দিন (যেমন প্রিলোডার)।
3. ডেটা সীমাবদ্ধ করা: Infinite Scroll ব্যবহার করার সময় ডেটার পরিমাণ সীমিত রাখুন। অনেক ডেটা লোড হলে পেজ স্লো হয়ে যেতে পারে।
4. লজি কন্ট্রোল: Pull-to-Refresh এবং Infinite Scroll-এর লজিক আলাদা রাখুন, যাতে কোনো একটির প্রভাব অন্যটিতে না পড়ে।

সারাংশ

Framework7 এ Pull-to-Refresh এবং Infinite Scroll ফিচার সহজেই কনফিগার করা যায় এবং এটি অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব করে তোলে। এই ফিচারগুলো ডেটা লোড এবং রিফ্রেশ করার জন্য গুরুত্বপূর্ণ। উদাহরণ এবং টিপস অনুসরণ করে আপনি সহজেই আপনার অ্যাপ্লিকেশনে এই ফিচারগুলো যুক্ত করতে পারবেন।