Yêu cầu thg 10 4, 2019 4:14 SA 3592 0 3
  • 3592 0 3
+3

Ant Design Select infinity scroll load more

Chia sẻ
  • 3592 0 3

chào các bạn ! Hiện tại Form của mình dùng thư viện Ant, và trong Form có trường Select có chức năng infinity scroll để load more (khi gọi API load data) Mình đang bị bí chỗ này chưa biết solution, các bạn giúp m với ạ.

M xin cám ơn mọi người !

3 CÂU TRẢ LỜI


Đã trả lời thg 10 8, 2019 3:17 SA
Đã được chấp nhận
+3

Vấn đề của bạn là chưa tìm đc chỗ scroll đến bottom, bạn tìm thấy thằng opPopupScroll là sắp tới rồi. Screenshot from 2019-10-08 10-16-55.png bạn có thể xem phần mình comment + giá trị console.log bên phải để thấy nhé

Chia sẻ
Avatar Hoang vn @wiliamfeng
thg 10 8, 2019 8:52 SA

tks bạn, để mình nghiên cứu nha

thg 10 8, 2019 9:08 SA

@wiliamfeng trong phần handleScroll bạn chỉ cần check điều kiện schollHeight == clientHeight + scrollTop là call API lấy thêm list option là đc

Avatar Hoang vn @wiliamfeng
thg 10 12, 2019 3:33 SA

Mấy hôm rồi bận bịu quá không có thời gian feedback lại comment của bạn. Mình đa áp dụng được theo cách bạn hd rồi nha. Cám ơn @tuaniot nhiều lắm !

thg 8 27, 2021 3:09 CH

Bạn ơi mình cũng đang vướng chỗ này, bạn có the gửi mình đoạn code này mình tham khảo với , thank bạn

thg 8 31, 2021 10:03 SA

@duongnh đợt viết mình k lưu cái này 😐 với cả trên ảnh là đủ luôn r đó chứ k còn gì nữa đâu 😄

thg 9 3, 2021 4:04 CH

@tuaniot cám ơn bạn, bạn có thể cho mình zalo đc không , hihi có gì k biết mình hỏi cao nhân 😃 , 035 329 3254 mình tên dương đây là zalo của mình

Đã trả lời thg 10 4, 2019 4:16 SA
+2

Các cái Option bên trong Select thì bạn lấy nó ra từ 1 array và dùng map để render nó ra thì trong trường hợp Infinite Scroll thì bạn chỉ cần thêm 1 cái event là bắt sự kiện scroll bên trong cái Select đó đến gần cuối là gọi API đẩy tiếp vào cái mảng nói trên là được

Chia sẻ
Avatar Hoang vn @wiliamfeng
thg 10 4, 2019 4:23 SA

tks bạn, mình đang bị bí chỗ bắt sự kiện scroll đó bạn. Về sự kiện nó cung cấp cho mình sẵn cái onPopupScroll nhưng mình chưa biết tìm cách nào để bắt được khi scroll đến bottom để gọi tiếp api

thg 10 4, 2019 5:52 SA

@wiliamfeng khi render ra thì thực tế component của bạn nó cũng là HTML thông thường. Bạn có thể gán thêm class hoặc id cho cái box select đó và từ đó bạn có thể lấy dom theo kiểu:

document.getElementById('some-id')

Từ đầy bạn sẽ tính chiều cao của cái select box đó và tạo ra 1 event lắng nghe sự kiện scroll với dom nói trên và goji API thôi bạn có thể xem ví dụ về lắng nghe event scroll tại đây https://codesandbox.io/s/vibrant-engelbart-qtccs. Tuy nhiên mình không rõ bạn định làm như nào nhưng thông thường áp dụng infinity scroll với select box có vẻ không hợp lý cho lắm mà ở đây mình nghĩ bạn nên làm theo kiểu cho người dùng search theo key word và nó hiển thị ra cái select box theo keyword người dùng tìm thì có vẻ hợp lý hơn.

Avatar Hoang vn @wiliamfeng
thg 10 4, 2019 6:36 SA

tks bạn, trường hợp của mình nó lại là Select bình thường chứ không có search bạn à. Và do bên API mỗi lần gọi họ chỉ trả đúng 20 item nên mình phải làm thêm cái load-more bằng infinite scroll

Avatar Hoang vn @wiliamfeng
thg 10 4, 2019 7:26 SA

@HuyDQ Mình vẫn chưa giải quyết được bạn à, bạn có thể ví dụ trực tiếp với thằng Select của Antd giúp mình với được không ?

thg 10 4, 2019 7:30 SA

@wiliamfeng ý mình là với trường hợp bạn có nhiều dữ liệu cho việc select như thế thì bạn nên để nó dạng Search-Select vì thực tế chẳng user nào muốn scroll mấy chục item chỉ để tìm được cái option mong muốn cả mà thay vào đó họ chỉ gõ 2-3 char và API của bạn nên hiển thị ra list các option phù hợp với cái mà user mong muốn. Bạn có thể tham khảo chỗ này https://ant.design/components/select/#components-select-demo-select-users

Avatar Hoang vn @wiliamfeng
thg 10 4, 2019 7:35 SA

@HuyDQ Bạn ơi, nhưng mà bên api họ trả về chỉ có 20 item một lần gọi thôi.

Cứ cho rằng làm theo cách của bạn implement thêm chức năng search được để filter bớt nhưng nếu search rồi mà kq của trường search đó vẫn nhiều hơn 20 item thì vẫn phải cần load-more bạn ơi

Đã trả lời thg 10 6, 2019 9:46 SA
+1

Bác dùng component Select thì listen cái event onPopupScroll để khi cuộn cái list thì fetch thêm data về. Nên check khi cuộn gần tới cuối thì fetch more items về. Giả sử định nghĩa gần tới cuối dùng cách tính như này chẳng hạn:

Quãng đường đã cuộn được > 3/5 chiều cao của danh sách

Code sẽ có dạng như sau:

function async handleScroll(e) {
  const isEndOfList = e.target.scrollTop > 3/5*e.target.scrollHeight;

  if (isEndOfList) {
    fetchMoreItems({ last_item_id: 20, per_page: 20 })
      .then(...)
  }
}

<Select
   ...
   onPopupScroll={handleScroll}
>
  {children}
</Select>

Bạn tham khảo thử nhé.

Chia sẻ
Avatar Hoang vn @wiliamfeng
thg 10 7, 2019 1:25 SA

Tức là mình cũng chỉ tính được một cách tương đối trường hợp kéo đến cuối cùng thôi chứ không chính xác được à bạn.

Để mình thử áp dụng cách của bạn xem nhé, thank bạn nhiều nha

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí