วิธีการใช้ Infinite Scrolling ใน Vue

การเลื่อนไม่สิ้นสุดหรือการออกแบบ"ไร้หน้า"เป็นวิธีการขั้นสูงที่ช่วยให้สามารถนำเสนอข้อมูลเพิ่มเติมได้อย่างราบรื่นเมื่อผู้ใช้เลื่อนลงหน้าเว็บไปเรื่อยๆ ด้วยการแบ่งหน้าแบบดั้งเดิม วิธีนี้รองรับการสำรวจชุดข้อมูลจำนวนมากโดยไม่หยุดชะงัก มอบประสบการณ์การสืบค้นที่ราบรื่นและไม่สะดุด

การตั้งค่าแอปพลิเคชัน Vue ของคุณ

เพื่อให้ผ่านบทช่วยสอนนี้ได้สำเร็จ คุณต้องมีความเข้าใจเบื้องต้นเกี่ยวกับ Vue 3 และภาษาโปรแกรมพื้นฐานอย่าง JavaScript นอกจากนี้ จำเป็นต้องมีความคุ้นเคยกับการจัดการคำขอ HTTP โดยใช้ Axios

ในการเริ่มต้นกระบวนการควบคุมการใช้งานการเลื่อนแบบไม่มีที่สิ้นสุดภายในแอปพลิเคชัน Vue ให้ดำเนินการคำสั่ง npm ต่อไปนี้ในพื้นที่ทำงานที่คุณต้องการ:

 npm create vue

เมื่อเริ่มกระบวนการกำหนดค่าโครงการ Vue จะสอบถามเกี่ยวกับการเลือกเทมเพลตแอปพลิเคชัน ขอแนะนำว่าอย่าเลือกฟังก์ชันเพิ่มเติม เนื่องจากไม่จำเป็นสำหรับงานปัจจุบันที่ทำอยู่

หลังจากสร้างแอปพลิเคชันใหม่แล้ว ให้ไปที่โฟลเดอร์และดำเนินการตามขั้นตอนการติดตั้ง npm ต่อไปนี้เพื่อรับโมดูลที่จำเป็น:

 npm install axios @iconify/vue @vueuse/core

เมื่อดำเนินการตามขั้นตอนการติดตั้ง npm จะส่งผลให้เกิดการรวมแพ็คเกจที่แตกต่างกันสามแพ็คเกจ โดยเฉพาะ Axios สำหรับอำนวยความสะดวกในการทำธุรกรรม HTTP

การใช้ Axios และ “@iconify/vue” แอปพลิเคชันนี้ดึงข้อมูลในขณะที่รวมเอาภาพสัญลักษณ์ผ่านไลบรารีดังกล่าว แพ็คเกจ “@vueuse/core” นำเสนอโมดูลยูทิลิตี้ Vue หลากหลายประเภท ได้แก่ “useInfiniteScroll” ซึ่งอำนวยความสะดวกในการเลื่อนฟังก์ชันแบบไม่จำกัดภายในอินเทอร์เฟซ

กำลังดึงข้อมูลจำลองจาก JSONPlaceholder API

หากต้องการใช้ฟังก์ชันการเลื่อนแบบไม่มีที่สิ้นสุด คุณต้องมีข้อมูล คุณสามารถฮาร์ดโค้ดข้อมูลเหล่านี้หรือรับข้อมูลจากแหล่ง API ปลอมฟรี เช่น JSONPlaceholder

การดึงข้อมูลจาก JSONPlaceholder เลียนแบบสถานการณ์จริง ซึ่งมักจะเป็นกรณีของแพลตฟอร์มบนเว็บเพื่อรับข้อมูลจากฐานข้อมูลแทนที่จะใช้ค่าที่กำหนดไว้อย่างชัดเจน

ในการดึงข้อมูลจาก Application Programming Interface (API) ภายในโครงการ Vue ให้สร้างไดเร็กทอรีใหม่ภายใต้ร่ม"src"และกำหนดให้เป็น"api"ภายในไดเร็กทอรีที่สร้างขึ้นใหม่นี้ ให้เริ่มต้นเอกสาร JavaScript ใหม่และแทรกสคริปต์อัลกอริทึมที่ตามมา:

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

ข้อมูลโค้ดที่ระบุมีฟังก์ชันที่ดึงความคิดเห็นจากตำแหน่งข้อมูล JSONPlaceholder API “ https://jsonplaceholder.typicode.com/comments ” การดำเนินการแบบอะซิงโครนัสนี้ตามมาด้วยการส่งออกฟังก์ชัน ซึ่งอนุญาตให้ส่วนอื่นๆ ของแอปพลิเคชันใช้ฟังก์ชันการทำงานได้

เพื่อให้ข้อมูลเชิงลึกเพิ่มเติม ข้อความที่ให้มาเกี่ยวข้องกับตัวอย่างการเขียนโปรแกรมที่ใช้ไลบรารี Axios เพื่อดึงข้อมูลจากแหล่งภายนอก โดยเฉพาะอย่างยิ่ง มันอธิบายการใช้งานฟังก์ชันชื่อ “getComments” ซึ่งยอมรับสองพารามิเตอร์ ได้แก่ “max” และ “omit” พารามิเตอร์เหล่านี้เป็นองค์ประกอบสำคัญของฟังก์ชันการทำงานของฟังก์ชัน ทำให้สามารถดำเนินการตามที่ตั้งใจไว้ภายในโปรแกรมหรือแอปพลิเคชันขนาดใหญ่ที่ฝังฟังก์ชันนั้นไว้

ฟังก์ชัน getComments รวมเมธอด axios.get() ซึ่งใช้เพื่อส่งคำขอ GET ไปยัง URL ที่กำหนดซึ่งมีพารามิเตอร์การค้นหาที่ระบุเป็น max และ omit พารามิเตอร์เหล่านี้รวมเข้ากับ URL ผ่านการใช้เทมเพลตตัวอักษรที่อยู่ใน backticks () ซึ่งจะช่วยอำนวยความสะดวกในการแทรกค่าที่เปลี่ยนแปลงแบบไดนามิกภายใน URL

ในเวลาต่อมา วิธีการนี้จะสร้างการจัดเรียงใหม่ ซึ่งครอบคลุมคลังข้อมูลของการตอบสนองที่ได้รับผ่านทางจุดสิ้นสุด API โดยวิธีการดำเนินการแมป

ในกรณีที่ตรวจพบข้อผิดพลาด ส่วนย่อยของรหัสจะบันทึกปัญหาไปยังคอนโซลเพื่อตรวจสอบเพิ่มเติม ต่อจากนั้น Code Segment จะส่งออกฟังก์ชันนี้ไปยังส่วนต่าง ๆ ของโปรแกรมของคุณเพื่อใช้งานในส่วนอื่น ๆ

การสร้างส่วนประกอบ Infinite Scroll

เมื่อพิจารณาถึงความสามารถของคุณในการจัดการการดำเนินการเชิงตรรกะที่เกี่ยวข้องกับการดึงข้อมูล ตอนนี้คุณสามารถดำเนินการสร้างองค์ประกอบใหม่ที่แสดงข้อมูลที่ได้รับและจัดการคุณลักษณะการเลื่อนแบบถาวร

ในการสร้างคอมโพเนนต์ Vue ใหม่ชื่อ “InfiniteScroll” ภายในโฟลเดอร์ “src/components” ของโปรเจ็กต์ คุณอาจทำตามขั้นตอนต่อไปนี้:1. นำทางไปยังไดเร็กทอรีรากของโปรเจ็กต์ของคุณโดยใช้ file explorer หรืออินเตอร์เฟสบรรทัดคำสั่งที่ต้องการ2. ค้นหาโฟลเดอร์ “src” และขยายหากจำเป็น3. ค้นหาโฟลเดอร์ “components” ที่มีอยู่ภายในไดเร็กทอรี “src” และสร้างใหม่หากไม่มีอยู่4. ภายในโฟลเดอร์ “components” ที่สร้างขึ้นใหม่หรือที่มีอยู่ ให้สร้างโฟลเดอร์อื่นชื่อ “InfiniteScroll”5. เปิดโฟลเดอร์ “InfiniteScroll” โดยใช้โปรแกรมแก้ไขข้อความหรือสภาพแวดล้อมการพัฒนาแบบรวม (IDE) และแทรกข้อมูลโค้ดที่ให้ไว้เป็นเนื้อหา6. บันทึกการเปลี่ยนแปลงที่ทำกับไฟล์โดยคลิกที่ปุ่มที่เหมาะสม

 <!-- 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

จากนั้นโค้ดจะสร้างรายการที่ไม่เรียงลำดับโดยใช้ฟังก์ชัน ref โดยอ้างอิงองค์ประกอบ DOM ที่กำหนดฟังก์ชันการเลื่อนแบบไม่มีที่สิ้นสุดผ่านตัวแปร listRef

ตัวแปร commentsDisplayed หมายถึงจำนวนรายการความเห็นที่กำหนดไว้ล่วงหน้าซึ่งแสดงในตอนแรกบนหน้าเว็บ ตามลําดับ คอมโพเนนต์ commentsList ประกอบด้วยชุดคำสั่งของข้อสังเกตที่ได้รับจากฟังก์ชัน getComments

โค้ดที่ให้มาจะแนะนำกลไกการเรียกความคิดเห็น โดยใช้ฟังก์ชันแบบอะซิงโครนัสชื่อ commentsToDisplayOnScroll ซึ่งใช้ฟังก์ชัน getComments'เพื่อรับหมายเหตุเพิ่มเติมและต่อท้ายอาร์เรย์ commentsList ที่มีอยู่แล้วโดยใช้ไวยากรณ์สเปรด (… ` ).

สุดท้าย ข้อมูลโค้ดที่ให้ไว้จะเปิดใช้งานฟังก์ชันการเลื่อนแบบไม่มีที่สิ้นสุดโดยใช้ฟังก์ชัน ` useInfiniteScroll’ด้วยพารามิเตอร์สามตัว:

องค์ประกอบ DOM ซึ่งกำหนดให้เป็น “listEl” ทำหน้าที่เป็นข้อมูลอ้างอิงถึงรายการที่ผู้ใช้แอปพลิเคชันจะนำทางผ่านการเลื่อน

ขณะที่ผู้ใช้เลื่อน ฟังก์ชันแบบอะซิงโครนัสจะถูกกระตุ้นเพื่อดึงข้อมูลและเพิ่มความคิดเห็นใหม่ไปยัง commentsList

สามารถใช้อ็อบเจกต์คอนฟิกูเรชันที่เป็นทางเลือกซึ่งแสดงคุณสมบัติต่างๆ ของมันเพื่อกำหนดว่าการแสดงคำอธิบายที่กำลังจะมีขึ้นจะเริ่มขึ้นเมื่อผู้ใช้เคลื่อนที่ผ่านระยะการกระจัดในแนวนอน 10 พิกเซลเทียบกับจุดสิ้นสุดของม้วนความคิดเห็นปัจจุบัน

การใช้ส่วนประกอบ Infinite Scroll

หลังจากใช้ฟังก์ชันการเลื่อนแบบไม่จำกัดภายในส่วนสคริปต์ของคอมโพเนนต์ InfiniteScroll แล้ว จำเป็นต้องแสดงเนื้อหาที่เกี่ยวข้องภายในพื้นที่เทมเพลตของโครงสร้าง HTML ของคอมโพเนนต์

รวมข้อมูลโค้ดต่อไปนี้ไว้ในคอมโพเนนต์"InfiniteScroll":

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

ส่วนรหัสปัจจุบันประกอบด้วยพิมพ์เขียวสำหรับคอมโพเนนต์ Vue.js ซึ่งได้รับมอบหมายให้ทำหน้าที่ในการแสดงภาพอาร์เรย์ของรายการคำอธิบายในลักษณะที่ใช้งานง่าย

องค์ประกอบ ทำหน้าที่รวมกลุ่มของส่วนประกอบ ซึ่งแต่ละองค์ประกอบสร้างขึ้นโดยใช้คำสั่ง v-for สำหรับการสร้างรายการ คำสั่งนี้วนซ้ำในอาร์เรย์ commentsList เพื่อสร้างแต่ละรายการภายในรายการ

ความคิดเห็นจะแสดงในองค์ประกอบรายการ โดยแต่ละการวนซ้ำจะแสดงแทนด้วยการแก้ไขข้อมูลภายในแท็ก HTML ที่สอดคล้องกัน ( {{ ความคิดเห็น }}) นอกจากนี้ การอ้างอิงขององค์ประกอบรายการที่ไม่มีลำดับถูกกำหนดให้กับองค์ประกอบ ul สำหรับการนำฟังก์ชันการเลื่อนที่ไม่สิ้นสุดไปใช้

ในการใช้ฟังก์ชันของคอมโพเนนต์ 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>

โค้ดที่ให้มานำเข้าองค์ประกอบ React สององค์ประกอบ ได้แก่ InfiniteScroll และ Icon ซึ่งใช้ภายในองค์ประกอบ Suspense เพื่อจัดการการแสดงผลเนื้อหาแบบอะซิงโครนัส

คอมโพเนนต์ Suspense เปิดใช้งานการแสดงตัวยึดตำแหน่ง เช่น ไอคอน ในขณะที่รอการแก้ปัญหาของการดำเนินการแบบอะซิงโครนัสภายในคอมโพเนนต์ InfiniteScroll สิ่งนี้ทำได้โดยการใช้ความสามารถของ Vue ในการจัดการงานอะซิงโครนัสที่ค้างอยู่ทั้งหมดให้เสร็จสิ้นก่อนที่จะแสดงผลเอาต์พุตสุดท้าย

ตอนนี้คุณสามารถดูแอปพลิเคชันของคุณได้โดยดำเนินการคำสั่ง"npm run dev"ภายในไดเร็กทอรีของโครงการ ลักษณะที่ปรากฏควรคล้ายกับภาพประกอบด้านล่าง:

เมื่อคุณเลื่อนดูเนื้อหาด้านล่าง แอปพลิเคชันจะดึงคำอธิบายเพิ่มเติมแบบไดนามิกตามความคืบหน้าของคุณตามลำดับความชอบที่ได้รับจากมากไปน้อย

การใช้เทคนิคการเลื่อนไม่สิ้นสุดได้รับความโดดเด่นในแอปพลิเคชันบนเว็บที่หลากหลาย โดยเฉพาะอย่างยิ่งที่พบในแพลตฟอร์มโซเชียลมีเดียเช่น X และ TikTok

การใช้วิธีนี้ช่วยรักษาการมีส่วนร่วมของผู้ใช้โดยการดึงข้อมูลเพิ่มเติมอย่างต่อเนื่อง ดังนั้นจึงนำเสนอเนื้อหาอย่างต่อเนื่องสำหรับการอ่าน การศึกษา และการดู โดยรักษาความอยากรู้อยากเห็นและความสนใจของพวกเขาไว้

เรียนรู้การนำส่วนประกอบ Vue กลับมาใช้ใหม่ด้วยสล็อต

คุณได้รับความชำนาญในการใช้วิธีเลื่อนแบบไม่มีที่สิ้นสุดโดยใช้คอมโพเนนต์ useInfiniteScroll ของ VueUse

ในการพัฒนาเว็บไซต์ร่วมสมัย เป็นเรื่องปกติที่จะแสดงส่วนประกอบที่เหมือนกันโดยใช้เนื้อหา HTML ที่แตกต่างกัน ด้วยความเชี่ยวชาญในการใช้องค์ประกอบ Vue ซ้ำ เราสามารถรักษารูปลักษณ์ที่เหมือนกันทั่วทั้งส่วนต่างๆ ของเว็บแอปพลิเคชันได้อย่างมีประสิทธิภาพ