Xử lý tương tác kéo xuống để làm mới (Pull-down Refresh)

Khái niệm: Đây là thuật ngữ chỉ hành động người dùng vuốt tay từ phía trên mép màn hình đi xuống nhằm yêu cầu hệ thống tải lại dữ liệu hiển thị. Tính năng này rất phổ biến trên các ứng dụng di động.

Cách thức kích hoạt tính năng

Bạn có thể bật khả năng kéo xuống làm mới theo hai phương pháp:

• Toàn cục: Thiết lập thuộc tính enablePullDownRefresh thành true trong nút window của file cấu hình app.json.
• Từng trang: Cấu hình enablePullDownRefresh thành true ngay trong file JSON của riêng trang đó.

Khuyến nghị trong quá trình phát triển là nên áp dụng phương án thứ hai, chỉ bật tính năng cho những trang thực sự cần thiết.

Tùy chỉnh ngoại quan cửa sổ làm mới

Cả trong cấu hình tổng thể hay từng trang đều hỗ trợ các thuộc tính sau để định hình giao diện khi đang kéo:

• backgroundColor: Quy định màu nền của khung làm mới, hỗ trợ định dạng mã HEX.
• backgroundTextStyle: Chọn kiểu chữ loading, chỉ chấp nhận giá trị dark hoặc light.

Xử lý logic sự kiện kéo xuống

Một ví dụ minh họa: Giao diện WXML hiển thị tổng số lượt xem và nút để tăng giá trị này:

<!-- Cấu trúc giao diện -->
<view>Lượt xem: {{viewCount}}</view>
<button bindtap="handleIncrease">Thống kê </button>

Hàm xử lý tăng số liệu trong file JavaScript:

// Hàm tăng lượng truy cập khi bấm nút
handleIncrease() {
  const updatedCount = this.data.viewCount + 1;
  this.setData({ viewCount: updatedCount });
}

Để đặt lại dữ liệu khi người dùng kích hoạt tính năng kéo xuống, ta sử dụng hàm sự kiện onPullDownRefresh:

/**
 * Sự kiện lắng nghe thao tác kéo xuống của người dùng
 */
onPullDownRefresh() {
  // Cập nhật dữ liệu về trạng thái gốc
  this.setData({
    viewCount: 0
  });
  
  // Bắt buộc gọi hàm này để ẩn vòng tròn loading sau khi xử lý xong
  wx.stopPullDownRefresh();
}

Nếu không gọi wx.stopPullDownRefresh(), hiệu ứng loading sẽ không tự động biến mất.

Xử lý sự kiện cuộn đến đáy trang (Pull-up Load More)

Khái niệm

Là hành động người dùng vuốt tay hướng xuống đáy màn hình để yêu cầu tải thêm nhiều nội dung mới vào danh sách hiện tại.

Giám sát sự kiện

Sử dụng hàm onReachBottom trong file logic trang để nhận diện khi con trỏ cuộn chạm gần đến phần cuối nội dung.

/**
 * Hàm xử lý khi chạm tới đáy trang
 */
onReachBottom() {
  console.log('Hành động cuộn xuống đáy đã được ghi nhận');
  // Tại đây có thể thêm logic nạp thêm trang dữ liệu
}

Cấu hình khoảng cách kích hoạt

Thuộc tính onReachBottomDistance cho phép định nghĩa khoảng cách (tính bằng pixel) từ vị trí hiện tại của thanh cuộn đến đáy trang để kích hoạt sự kiện. Mặc định giá trị này là 50px, nhà phát triển có thể tùy chỉnh linh hoạt dựa trên thiết kế sản phẩm.

Ghi chú về chế độ biên dịch tùy chỉnh

Trong quá trình debug, thay vì phải khởi chạy từ trang index mặc định, bạn có thể cài đặt chế độ biên dịch tùy chỉnh để chương trình chạy trực tiếp vào trang cụ thể đang phát triển.