Pull down refresh và Pull up loading | Phát triển ứng dụng đa nền tảng - Sharing
Pull down refresh
Kiểu kéo để làm mới (hoặc vuốt để làm mới - pull down refresh) cho phép người dùng kéo xuống danh sách dữ liệu bằng cách sử dụng thao tác chạm để truy xuất thêm dữ liệu. Cử chỉ “Kéo để làm mới” được Loren Brichter giới thiệu lần đầu tiên trong ứng dụng Tweetie và nhanh chóng nó trở nên phổ biến đến mức vô số ứng dụng đã áp dụng cử chỉ này. Ngày nay, tính năng "kéo để làm mới" là một phần tự nhiên của nhiều ứng dụng phổ biến, bao gồm Twitter, Gmail, Tweetbot và những ứng dụng khác.
Cách hoạt động: một chỉ báo làm mới ( mũi tên vòng tròn) xuất hiện để báo hiệu cho người dùng hành động kéo xuống này sẽ làm mới lại màn hiện tại.
Pull down refresh hoạt động tốt cho danh sách, danh sách dạng lưới hoặc bộ sưu tập được sắp xếp theo nội dung gần đây nhất, vì thế thao tác pull down refresh thích hợp trong các trường hợp như là bảng tin Facebook hay Twitter, Inbox messenger,…
Các trường hợp không thích hợp sử dụng:
+ Bản đồ: vì bản đồ không có hướng xác định
+ Danh sách không có thứ tự: vì việc danh sách không có thứ tự thì làm mới sẽ không mang lại được tác dụng gì
+ Các ứng dụng hoặc màn hình mà có tỉ lệ cập nhật thông tin thấp hoặc không thường xuyên
+ Dữ liệu sắp xếp theo thứ tự thời gian: nên có nút làm mới vì khi sắp xếp theo thứ tự thời gian người dùng sẽ kéo từ trên xuống để xem và khi đó việc kéo lên cùng để làm mới là khó khăn
+ Một số dạng nội dung đặc biệt khác
Pull up loading
Pull up loading hay là lazy loading là một cách tốt để cải thiện trải nghiệm người dùng, lazy loading trì hoãn tải hoặc khởi tạo tài nguyên hoặc đối tượng cho đến khi chúng thực sự cần thiết. Ví dụ: nếu một trang web có hình ảnh mà người dùng phải cuộn xuống để xem, chúng ta có thể hiển thị trình giữ chỗ và chỉ tải hình ảnh đầy đủ một cách chậm rãi khi người dùng đến vị trí của trang đó. Hoặc là bảng tin facebook, facebook chỉ tải 1 số status và khi người dùng kéo xuống mới tiếp tục tải những status khác.
Lợi ích của pull up loading: giảm thời gian tải ban đầu, bảo toàn băng thông, bảo tồn tài nguyên hệ thống
Pull up loading sử dụng trong các trường hợp mà ứng dụng có nhiều thông tin mà việc tải ngay ban đầu có thể gây mất thời gian hoặc quá tải, sử dụng trong các trường hợp danh sách mà các phần tử cũ hơn ít được xem xét đến, hoặc là trường hợp mà nội dung thay đổi như là bảng tin facebook, twitter.
Pull up loading là rất tốt để giảm băng thông tuy nhiên không lên quá lạm dụng, trong các ứng dụng có ít thông tin hoặc các ứng dụng mà nội dung ít thay đổi.
Trong React Native
Pull down refresh: Chức năng Kéo để Làm mới được triển khai bằng cách sử dụng thành phần RefreshControl trong React Native. RefreshControl được sử dụng bên trong ScrollView hoặc ListView để thêm kéo để làm mới chức năng. Khi ScrollView ở scrollY: 0, vuốt xuống sẽ kích hoạt sự kiện onRefresh.
Pull up loading: Đặt vị trí ban đầu của Hình ảnh trong ScrollView, Theo dõi vị trí hiện tại của page offset, Thay đổi trạng thái khi page offset đến gần
Trong Flutter
Pull down refresh: Đặt ListView, GridView… bên trong Widget RefreshIndicator, thuộc tính onRefresh: mô tả cách thức chương trình refresh dữ liệu.
Pull up loading: Sử dụng ListView.builder, GridView.builder… thuộc tính controller của của ListView.builder… sẽ thực hiện việc load các dữ liệu khi người dùng thực hiện thao thác cuộn màn hình.
