اسکرول بی نهایت از طریق paginate و vuejs

@miladfathi021

درود

همونطور که آقای موسوی اشاره کردند پکیج های آماده‌ای برای این کار هست اما در کل چیز پیچیده‌ای نیست

در جاوااسکریپت ... در شئ window رویدادی داریم به نام onscroll که میتونید ازش استفاده کنید; سپس با استفاده از پراپرتیهای scrollTop و offsetHeight از شئ document و پراپرتی innerHeight از شئ window چک کنید که آیا کاربر به پایین صفحه رسیده یا نه.

به طور مثال اگر بخواهیم پست‌های یه بلاگ رو اینطوری نمایش بدیم...مراحل کار میتونه شبیه به زیر باشه:

• پیاده‌سازی وب سرویس به همراه pagination
• گرفتن اطلاعات اولیه پست ها
• پیاده‌سازی لاجیک مربوط به اسکرول بی‌نهایت

---

پیاده‌سازی وب سرویس به همراه pagination

ابتدا تیاز دارید Route های مربوط به API رو که باید شامل حداقل یه پارامتر Current Page باشه پیاده‌سازی کنید. مثلا آدرس API شما به شکل زیر باشه:

https://yourAPI.com/api/posts/page/1

و اگر هم page رو بهش پاس ندید، صفحه اول رو برگردونه

---

گرفتن اطلاعات اولیه پست ها

ابتدا ۲ گزینه رو مقداردهی میکنیم. اولی posts هست که برابر یه آرایه خالی قرار میدیم و دومی currentPage یا صفحه فعلی هست که برابر ۱ قرار میدیم.

قبل از هر کاری وقتی کاربر صفحه رو باز میکنه ما باید صفحه اول رو بهش نشون بدیم.. پس از متد getInitialPosts استفاده میکنیم; این متد با یه درخواست axios پست‌های مربوطه رو میگیره و داخل آرایه posts قرار میده. حال کافیه این متد رو قبل از اینکه کامپوننت Mount بشه اجرا کنیم »» پس getInitialPosts رو درون ()beforeMount قرار میدیم.

پس کامپوننت Mount میشه و در این حین اطلاعات اولیه (صفحه اول پست‌ها) رو هم از API دریافت کرده.... حال در بخش Template هم با یه v-for بسادگی آرایه رو پیمایش میکنیم و پست هارو نشون میدیم.

---

پیاده‌سازی لاجیک مربوط به اسکرول بی‌نهایت

تا اینجا همه کارها، کارهای معمولی بوده که با Vue انجام میشه. برای پیاده‌سازی اسکرول بی نهایت باید یه متد دیگه هم بسازیم.. پس متدی به نام infiniteScroll اضافه میکنیم و داخلش با استفاده از رویداد window.onscroll چک میکنیم که آیا به انتهای صفحه رسیدیم یا نه.
اگر به انتهای صفحه رسیده باشیم »»» مقدار currentPage رو یکی افزایش میدیم و با یه درخواست axios دیگه اطلاعات صفحه بعد رو دریافت میکنیم و به انتهای آرایه posts اضافه میکنیم...
و چون VueJs از Two-way data binding پشتیبانی میکنه به محض اضافه شدن پست های جدید‌ (به آرایه posts) ، کامپوننت دوباره رندر میشه و اطلاعات جدید رو هم نشون میده.
تنها کاری که باقی میمونه اینه که بعد از اینکه کامپوننت Mount شد (که پس از هر رندر اتفاق میفته)، متد ()infiniteScroll رو فراخوانی کنیم.. پس این متد رو داخل ()mounted قرار میدیم.

---

کلیت کار به همین روال انجام میشه و بقیه کارها مربوط به UI میشه که مثلا تا وقتی اطلاعات داره برمی‌گرده یه Loader هم نمایش داده بشه.

قسمت Template کامپوننت:

<template>
  <div id="app">
    <h1>Posts</h1>
    <div v-for="post in posts">
      <div class="postCard">
        <img :src="post.picture.large" />
      </div>
      <div>
        <p>{{ post.title }} {{ post.created_at }}</p>
        <p>{{ post.body }}</p>
      </div>
    </div>
  </div>
</template>

قسمت Script کامپوننت:

<script>
export default {
  data() {
    return {
      posts: [],
      currentPage: 1
    };
  },

  methods: {
    getInitialPosts() {
      axios.get(`https://yourAPI.com/api/posts`).then(response => {
        this.posts = response.data;
      });
    },

    infiniteScroll(post) {
      window.onscroll = () => {
        let bottomOfWindow =
          document.documentElement.scrollTop + window.innerHeight ===
          document.documentElement.offsetHeight;

        if (bottomOfWindow) {
          this.currentPage++;
          axios
            .get(`https://yourAPI.com/api/posts/page/${this.currentPage}`)
            .then(response => {
              this.posts.push(response.data);
            });
        }
      };
    }
  },

  mounted() {
    this.infiniteScroll(this.post);
  },

  beforeMount() {
    this.getInitialPosts();
  }
};
</script>

موفق باشید