javascript - vue 스크롤 로딩 이미지

Question

요구 사항: 스크롤 막대를 아래로 당길 때 사진을 로드합니다. 한 번에 6개의 사진을 로드합니다. 사진 수가 30개를 초과하는 경우 로드 후 처음 6개의 사진을 제거하고 30개의 DOM 노드를 유지합니다.

이제 이렇게 됩니다. 데이터에 imgarr=[]를 배열로 설정하여 이미지 주소를 저장합니다. 먼저 스크롤 요소의 clientHeight, scrollTop 및 scrollHeight 값을 가져오고 변수 스위치를 추가합니다. isload = true.clientHeight + scrollTop > scrollHeight - 30이고 isload가 true이면 이를 로드한 다음 isload를 false로 설정하고 로드된 이미지 주소를 imgArr에 추가합니다. , 로드된 이미지를 imgArr에 연결한 다음 this.nextTick의 imgArr에서 처음 6개의 이미지 주소를 삭제하고 스크롤 막대가 스크롤되지 않는 것을 확인했습니다. 쿼리 결과 this.nextTick이 이전 값이었을 때의 scrollHeight 값이 로드된 DOM의 높이가 포함되지 않은 것으로 나타났습니다. 그런데 이때 문제가 발생한 사람이 있습니까?

으아악 으아악

Answer 1

this.nextTick은 this.setTimeout(,0)으로 대체됩니다

Answer 2

플러그인 사용을 고려해보세요: https://peachscript.github.io...