2017-02-22 2 views
0

저는 angular-ui (ui-scroll)에서 ui-scroll으로 작업하고 있습니다.뷰포트 상단의 ui-scroll 버퍼 공간

모든 것이 잘 작동합니다. 아래로 스크롤하면 데이터가 사용자 정의 데이터 소스에서로드됩니다. 그러나 맨 위로 뒤로 스크롤하면 뷰포트 내에 많은 공백이 생깁니다.

검사시 ui-scroll이 하위 div를 추가하고 높이를 동적으로 설정하는 것처럼 보입니다. 그러나 어떤 이유로 뷰포트의 맨 위로 스크롤 할 때 다시 0으로 설정되지 않습니다.

저는 이것이 내 데이터 소스가 데이터를 제공하는 방식과 관련이 있다고 생각합니다. 나는 또한 부정적인 색인 생성에 대해 머리를 감싸 안고있다. 누군가가 표준 페이징 서비스 (인덱스 + 오프셋 등)에 매핑 할 때 datasource.get() 함수에서 음수 인덱스를 어떻게 처리해야하는지 설명 할 수 있습니까?

답변

0

좋아, 해결책을 찾은 것 같아. 아마 angle-ui 팀에서 제공하는 데모에서 실제 예제를 찾을 수 없기 때문에이 방법이 도움이되기를 바랍니다.

기본적으로 음수 인덱스를 받으면 1) 인덱스를 0으로 고정한 다음 그 차이로 카운트 변수를 조정해야합니다. 제한된 데이터 배열의 경우

dataSource.get = function (index, count, successCallback) 
    { 
     // Index provided is 1-based, we'll convert to 0-based and clamp at 0 
     var realIndex = Math.max(1, index) - 1; 

     if (index < 0) { 
      count -= 1 - index; 
     } 

     if (realIndex < 0 || 
      count == 0 || 
      realIndex >= vm.searchResultCount) 
     { 
      successCallback([]); 
      return; 
     } 

     ... 
     Make a pagination call to a service that expects the first 
     page of results to be at index 0. 
0

UI 스크롤 데이터 소스 구현이 당신이 min 인덱스로 시작하는 데이터 배열을 처리 할 수 ​​있도록이

var min = 1, max = 100; 
dataSource.get = function(index, count, success) { 
    var start = Math.max(min, index); 
    var end = Math.min(index + count - 1, max); 
    if (start <= end) { 
     getDataAsync(start, start + end + 1).then(success); 
    } 
    else { 
     success([]); 
    } 
}; 

처럼 보일 수 있습니다 : 여기

몇 가지 샘플 코드입니다 . 또한 하단의 제한을 var end = index + count - 1을 통해 쉽게 제거 할 수 있습니다.

하지만 저는 백엔드 책임이 될 수도 있다고 말하고 싶습니다. 이 샘플을보십시오 : https://rawgit.com/angular-ui/ui-scroll/master/demo/append/append.html - 데이터 배열은 1에서 50까지로 제한됩니다 (세부 사항 생략) 데이터 소스는 단지

입니다.
관련 문제