Vue를 사용하여 목록 페이지를 만들 때 문제를 발견했습니다. 데이터 한 조각이 한 행을 차지하고, 한 화면에 약 10개의 데이터를 담을 수 있으며, 스크롤 막대를 끝까지 스크롤하면 새 데이터가 로드됩니다. 하지만 데이터의 양이 특히 많을 경우(예: 수만 개) HTML에 DOM 노드가 많이 있을 것입니다. 이때 빈 p를 사용하여 화면에 없는 데이터 목록을 대체하고 싶습니다. 예를 들어 화면에 배치할 수 있는 3개의 데이터 노드에만 표시하고 나머지 데이터는 2개의 p로 채워집니다. 스크롤 막대가 한 화면 높이까지 스크롤되면 표시된 데이터가 대체됩니다( 표시된 데이터를 제어하기 위해 VUE에서 배열이 사용됩니다. 그런 다음 계산됩니다. 상부 및 하부 p의 높이에 대한 구현 방법을 찾습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
순수한 프런트 엔드 최적화라는 질문의 아이디어를 이해합니다. 페이지 요소 수를 제어하는 것이 합리적입니다.
모든 시나리오가 페이징에 적합한 것은 아닙니다. 요즘에는 많은 목록이 스크롤 방식으로 로드되며, 더 많이 스크롤할수록 더 많은 데이터를 얻을 수 있습니다. .
구현에 관해서는 질문자가 비교적 명확하게 설명한 것 같습니다. . 높이를 기준으로 표시해야 할 행을 계산하는 것은 괜찮지만 위와 아래의 공백 p는 필요하지 않다고 느낍니다
페이지 매김 같은 걸 고려하고 있지 않나요? 이렇게 하면 무슨 소용이 있나요?
위와 마찬가지로 이 경우에는 어떻게 작성하느냐보다 페이징의 의미가 완전히 더 큽니다(segemenfault가 Vue 페이징 구성 요소를 직접 검색하고 기성품도 있지만 Vue2.0은 아닙니다). 아마도 데이터 양이 매우 작다면 다른 페이징 구성 요소를 추가하는 것이 보기 흉할 것이라고 생각할 수도 있습니다.
네가 하는 방식은 그냥 장난처럼 느껴지고, 일도 많고, 좋지도 않아. 페이징 구성 요소를 사용하십시오! 요소가 있습니다. 페이지 매김 구성 요소. 효과를 느껴보세요