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