Cách triển khai cuộn vô hạn trong Vue

Cuộn vô hạn, hay thiết kế “không trang”, là một phương pháp nâng cao cho phép trình bày liền mạch thông tin bổ sung khi người dùng dần dần điều hướng xuống một trang web. Bằng cách loại bỏ phân trang truyền thống, phương pháp này hỗ trợ việc khám phá các bộ dữ liệu mở rộng mà không bị gián đoạn, mang lại trải nghiệm duyệt web mượt mà và không bị gián đoạn.

Thiết lập ứng dụng Vue của bạn

Để điều hướng thành công qua hướng dẫn này, điều cần thiết là bạn phải có hiểu biết cơ bản về Vue 3 và ngôn ngữ lập trình cơ bản của nó, JavaScript. Ngoài ra, cần phải quen với việc xử lý các yêu cầu HTTP bằng Axios.

Để bắt đầu quá trình làm chủ việc triển khai cuộn vô hạn trong ứng dụng Vue, hãy thực thi lệnh npm sau trong không gian làm việc mong muốn của bạn:

 npm create vue

Khi bắt đầu quá trình cấu hình dự án, Vue sẽ hỏi về việc chọn một mẫu ứng dụng. Bạn không nên chọn chức năng bổ sung nào vì chúng không cần thiết cho tác vụ hiện tại.

Sau khi thiết lập một ứng dụng mới, hãy chuyển đến thư mục của nó và thực hiện quy trình cài đặt npm sau để có được các mô-đun cần thiết:

 npm install axios @iconify/vue @vueuse/core

Khi thực hiện quy trình cài đặt npm, kết quả là sự kết hợp của ba gói riêng biệt, cụ thể là Axios để hỗ trợ các giao dịch HTTP,

Sử dụng Axios và “@iconify/vue”, ứng dụng này truy xuất dữ liệu trong khi kết hợp biểu tượng thông qua các thư viện nói trên. Gói “@vueuse/core” cung cấp một loạt các mô-đun tiện ích Vue, trong số đó có “useInfiniteScroll” hỗ trợ chức năng cuộn vô hạn trong giao diện.

Tìm nạp dữ liệu giả từ JSONPlaceholder API

Để thực hiện chức năng cuộn vô hạn, bạn cần có dữ liệu. Bạn có thể mã hóa cứng những dữ liệu này hoặc lấy dữ liệu từ nguồn API giả mạo miễn phí như JSONPlaceholder.

Truy xuất thông tin từ JSONPlaceholder bắt chước các tình huống thực tế, như trường hợp thường xảy ra đối với các nền tảng dựa trên web để lấy dữ liệu từ cơ sở dữ liệu thay vì dựa vào các giá trị được xác định rõ ràng.

Để truy xuất thông tin từ Giao diện lập trình ứng dụng (API) trong dự án Vue, hãy thiết lập một thư mục mới bên dưới ô “src” và chỉ định nó là “api”. Trong thư mục mới được tạo này, hãy bắt đầu một tài liệu JavaScript mới và chèn tập lệnh thuật toán tiếp theo:

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

Đoạn mã được cung cấp có chức năng truy xuất nhận xét từ điểm cuối API JSONPlaceholder “ https://jsonplaceholder.typicode.com/comments”. Hoạt động không đồng bộ này được theo sau bởi quá trình xuất hàm, cho phép các phần khác của ứng dụng sử dụng chức năng của nó.

Để cung cấp thông tin chi tiết bổ sung, văn bản được cung cấp liên quan đến ví dụ lập trình sử dụng thư viện Axios để tìm nạp dữ liệu từ nguồn bên ngoài. Cụ thể, nó mô tả việc triển khai một chức năng có tên là “getComments” chấp nhận hai tham số là “max” và “omit”. Các tham số này là các thành phần không thể thiếu trong chức năng của hàm, cho phép nó thực hiện hoạt động dự kiến ​​trong chương trình hoặc ứng dụng lớn hơn mà nó được nhúng vào.

Hàm getComments kết hợp phương thức axios.get(), được sử dụng để truyền yêu cầu GET tới một URL được chỉ định có chứa các tham số truy vấn được chỉ định là max và omit. Các tham số này được tích hợp vào URL thông qua việc sử dụng các ký tự mẫu có trong backticks (), do đó tạo điều kiện thuận lợi cho việc chèn các giá trị thay đổi động trong URL.

Sau đó, phương pháp này sẽ xây dựng lại một sắp xếp mới, bao gồm kho văn bản, các phản hồi thu được thông qua điểm cuối API bằng thao tác ánh xạ.

Trong trường hợp phát hiện lỗi, đoạn mã sẽ ghi sự cố vào bảng điều khiển để kiểm tra thêm. Sau đó, đoạn mã sẽ xuất hàm này sang các phần khác nhau trong chương trình của bạn để sử dụng trong các lĩnh vực khác.

Tạo Thành phần cuộn vô hạn

Xem xét trình độ của bạn trong việc xử lý các hoạt động logic liên quan đến truy xuất dữ liệu, giờ đây bạn có thể tiến hành xây dựng một phần tử mới hiển thị dữ liệu thu được và quản lý tính năng cuộn vĩnh viễn.

Để tạo một thành phần Vue mới, có tên là “InfiniteScroll”, trong thư mục “src/components” của dự án, bạn có thể làm theo các bước sau:1. Điều hướng đến thư mục gốc của dự án của bạn bằng trình duyệt tệp ưa thích hoặc giao diện dòng lệnh.2. Định vị thư mục “src” và mở rộng nó nếu cần.3. Tìm kiếm thư mục “thành phần” hiện có bên trong thư mục “src” và tạo một thư mục nếu nó không tồn tại.4. Trong thư mục “thành phần” mới tạo hoặc hiện có, hãy tạo một thư mục khác có tên “InfiniteScroll”.5. Mở thư mục “InfiniteScroll” bằng trình soạn thảo văn bản hoặc môi trường phát triển tích hợp (IDE) và chèn đoạn mã được cung cấp làm nội dung.6. Lưu các thay đổi được thực hiện vào tệp bằng cách nhấp vào nút thích hợp

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

Đoạn mã nói trên mô tả khối tập lệnh được liên kết với thành phần InfiniteScroll, mô tả chi tiết cách triển khai và chức năng của nó trong bối cảnh phát triển web.

Đoạn mã nhập hai hàm, ref và useInfiniteScroll , từ thư viện Vue cũng như @vueuse/core . Ngoài ra, nó nhập chức năng getComments từ một tệp riêng có tên getComments.js.

Sau đó, mã tạo một danh sách không có thứ tự bằng cách sử dụng hàm ref bằng cách tham chiếu một phần tử DOM đã được gán chức năng cuộn vô hạn thông qua biến listRef.

Biến commentsDisplayed biểu thị số lượng mục bình luận được xác định trước được hiển thị lúc đầu trên trang web. Tương ứng, thành phần commentsList chứa một tập hợp các nhận xét được sắp xếp theo thứ tự thu được bằng hàm getComments.

Mã được cung cấp giới thiệu một cơ chế truy xuất nhận xét, sử dụng hàm không đồng bộ có tên commentsToDisplayOnScroll , sử dụng hàm getComments để thu nhận các nhận xét bổ sung và nối chúng vào mảng commentsList có sẵn bằng cách sử dụng cú pháp trải rộng ( ... ).

Cuối cùng, đoạn mã được cung cấp sẽ kích hoạt chức năng cuộn vô hạn bằng cách sử dụng hàm useInfiniteScroll với ba tham số:

Phần tử DOM, được chỉ định là “listEl”, đóng vai trò tham chiếu đến danh sách mà người dùng ứng dụng sẽ điều hướng thông qua thao tác cuộn.

Khi người dùng cuộn, một chức năng không đồng bộ được kích hoạt để truy xuất và nối các nhận xét mới vào commentsList.

Một đối tượng cấu hình tùy chọn, được đặc trưng bởi các thuộc tính khác nhau của nó, có thể được sử dụng để chỉ ra rằng việc hiển thị bình luận sắp tới sẽ bắt đầu sau khi người dùng đã di chuyển qua một khoảng dịch chuyển ngang mười pixel so với điểm kết thúc của cuộn bình luận hiện tại.

Sử dụng Thành phần cuộn vô hạn

Sau khi triển khai chức năng cuộn vô hạn trong phần tập lệnh của thành phần InfiniteScroll, cần phải hiển thị nội dung có liên quan trong khu vực mẫu của cấu trúc HTML của thành phần.

Kết hợp đoạn mã sau trong thành phần “InfiniteScroll”:

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

Đoạn mã hiện tại cấu thành kế hoạch chi tiết cho thành phần Vue.js, thành phần này được giao nhiệm vụ trực quan hóa một loạt các mục bình luận theo cách thân thiện với người dùng.

Phần tử đóng vai trò bao gồm một nhóm các thành phần , mỗi thành phần được tạo bằng cách sử dụng chỉ thị v-for để tạo danh sách. Lệnh này lặp lại trên mảng commentsList ` để tạo các mục riêng lẻ trong danh sách.

Các nhận xét được trình bày trong phần tử mục danh sách, với mỗi lần lặp lại của vòng lặp được biểu thị bằng phép nội suy dữ liệu trong thẻ HTML tương ứng ( {{ nhận xét }}). Ngoài ra, tham chiếu của phần tử danh sách không có thứ tự được gán cho phần tử ul để triển khai chức năng cuộn vô hạn.

Để sử dụng chức năng của thành phần InfiniteScroll trong ứng dụng của bạn, bạn nên tích hợp nó vào tệp App.vue chính. Điều này cho phép kết hợp liền mạch và đảm bảo rằng cơ chế tải dựa trên cuộn được áp dụng nhất quán trong toàn bộ giao diện người dùng.

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

Mã được cung cấp nhập hai thành phần React, cụ thể là InfiniteScroll và Icon, được sử dụng trong thành phần Suspense để quản lý hiển thị nội dung không đồng bộ.

Thành phần Suspense cho phép hiển thị một trình giữ chỗ, chẳng hạn như một biểu tượng, trong khi chờ giải quyết các hoạt động không đồng bộ trong thành phần InfiniteScroll. Điều này được thực hiện thông qua việc sử dụng khả năng của Vue để xử lý việc hoàn thành tất cả các tác vụ không đồng bộ còn tồn đọng trước khi hiển thị đầu ra cuối cùng.

Bây giờ bạn có thể xem qua ứng dụng của mình bằng cách thực hiện lệnh “npm run dev” trong thư mục của dự án. Giao diện phải giống với hình minh họa được mô tả bên dưới:

Khi bạn điều hướng qua nội dung bên dưới, ứng dụng sẽ tự động truy xuất các bình luận bổ sung dựa trên tiến trình của bạn theo thứ tự lượt thích nhận được giảm dần.

Việc sử dụng kỹ thuật cuộn vô hạn đã trở nên nổi bật trong nhiều ứng dụng dựa trên web, đặc biệt là những ứng dụng được tìm thấy trong các nền tảng truyền thông xã hội như X và TikTok.

Việc sử dụng phương pháp này duy trì sự tham gia của người dùng bằng cách liên tục truy xuất thông tin bổ sung, do đó cung cấp luồng tài liệu liên tục để nghiên cứu, giáo dục và xem, duy trì sự tò mò và quan tâm của họ.

Tìm hiểu cách sử dụng lại các thành phần Vue với các vị trí

Bạn đã thành thạo trong việc triển khai phương pháp cuộn vô hạn bằng cách sử dụng thành phần useInfiniteScroll của VueUse.

Trong quá trình phát triển trang web hiện đại, việc hiển thị các thành phần giống hệt nhau bằng cách sử dụng nội dung HTML riêng biệt là điều bình thường. Bằng cách nắm vững nghệ thuật sử dụng lại các thành phần Vue, người ta có thể duy trì một cách hiệu quả giao diện đồng nhất trong các phần khác nhau của ứng dụng web.