티타늄 무한 스크롤 : 작동하지 않습니다.

Question

40 % 스크롤에 도달하면 뷰를 내 스크롤보기에 추가하려고합니다. 이것은 내가하고있는 방식입니다 :

scrollView.add(//add first 10 initial containerView's); 
var triggerScroll = true; 
var scrollPercentage = 0; 
scrollView.addEventListener('scroll', function(e) { 
var devHeight = Ti.Platform.displayCaps.platformHeight; 
    var currPos = scrollView.contentOffset.y; 
    if(currPos > devHeight){ 
     currPos = currPos - devHeight; 
    } 

    scrollPercentage = (currPos)/devHeight * 100; 

    if(scrollPercentage > 40 && triggerScroll){ 
     triggerScroll = false; 
     var containerView = myapp.createMyView(); 
     scrollView.add(containerView); 
    } 

    //reset scroll to true after the offset reaches end of the screen, so that the 
    //'scroll' event listener only gets called ONCE every time it crosses 40% 
    if(scrollPercentage > 101){ 
     triggerScroll = true; 
    } 

}); 

그러나 그저 작동하지 않습니다. 내 수직 스크롤보기에서 무한 스크롤을 지원하려고합니다. 어떤 생각이 잘못 됐어?

Answer 1

무한 스크롤을 사용할 때 아래 모듈을 사용합니다. 그것은 TableView을 사용하지만, ScrollView에도 적용 할 수 있다고 생각합니다. TableView 등록시 추가 콘텐츠를로드해야 할 때 호출 할 function을 전달해야합니다.

로드가 완료되면 TableView에서 다른로드 시퀀스를 시작하려면 loadingDone -function을 호출해야합니다.

값 m_bNoDataFound은 목록에 채울 데이터가 더 이상 없을 때 로딩 시퀀스가 ​​시작되지 않도록합니다.

스크롤하는 동안로드 순서를 조만간 시작하려면 오프셋 (Android의 경우 현재 0.75, iOS의 경우 0.90)을 변경할 수 있습니다.가 underscoreJS를 사용하여 스크롤 이벤트 콜백을 스로틀하려고 :

1. 스크롤 이벤트가 많이 트리거 :

function TableView(onLoad) { 
    var isAndroid = Ti.Platform.osname === 'android' ? true : false; 

    var m_bNoDataFound = false; 
    var m_nLastDistance = 0; 
    var m_bPulling = false; 
    var m_bLoading = false; 

    var table = Ti.UI.createTableView({ 
     height : Ti.UI.FILL 
    }); 

    table.addEventListener('scroll', function(evt) { 
     //Scroll to load more data 
     if(!m_bNoDataFound) { 
      if(isAndroid) { 
       if(!m_bLoading && (evt.firstVisibleItem + evt.visibleItemCount) >= (evt.totalItemCount * 0.75)) { 
        onLoad(true); 
        m_bLoading = true; 
       } 
      } 
      else { 
       var nTotal = evt.contentOffset.y + evt.size.height; 
       var nEnd = evt.contentSize.height; 
       var nDistance = nEnd - nTotal; 

       if(nDistance < m_nLastDistance) { 
        var nNearEnd = nEnd * 0.90; 

        if(!m_bLoading && (nTotal >= nNearEnd)) { 
         onLoad(true); 
         m_bLoading = true; 
        } 
       } 

       m_nLastDistance = nDistance; 
      } 
     } 
    }); 

    function m_fLoadingDone(a_bNoDataFound) { 
     m_bNoDataFound = a_bNoDataFound; 

     if(m_bLoading) 
      setTimeout(function() { 
       m_bLoading = false; 
      }, 250); 
    } 

    return { 
     table : table, 
     loadingDone : m_fLoadingDone 
    }; 
}; 

module.exports = TableView; 

Answer 2

있는 ScrollView 내에서 무한 스크롤을 통합, 몇 가지 중요한 일들이 당신이 고려해야 할 필요가있다 .

스로틀 전달 기능, 즉, 반복적으로 호출 할 때, 실제로에서 가장 번씩 기다릴 밀리 초마다 원래의 함수를 호출의 버전을 스로틀, 만들고 새로운를 반환합니다. 따라 잡을 수없는 속도보다 빠르게 발생하는 속도 제한 이벤트에 유용합니다. 자세한 내용은 밑줄 문서를 참조하십시오. 아이폰 OS VS 안드로이드

2. 기본 시스템 유닛 : 안드로이드 도면의 크기는 뷰의 좌표와 다른 디스플레이 유닛을 사용한다. 이 단위가 일치하지 않으면 무한 스크롤에 대한 트리거가 잘못 계산됩니다. 이 문제를 해결하려면 직접 기본 단위를 가져오고 설정해야합니다. 이 솔루션은이 위젯에서 찾을 수 있습니다 (getDefaultUnit() 참조) TI의-인피니 스크롤이 당신을 도울 수 https://github.com/FokkeZB/nl.fokkezb.color/blob/master/controllers/widget.js

3.이 라이브러리는 기본 티타늄있는 ScrollView 래퍼를 작성합니다. 이 래퍼에는 스크롤 끝 (새 데이터 업데이트/가져 오기 트리거)의 계산이 포함됩니다. 이 라이브러리를 사용할 때는 글 머리 기호 번호 2를 구현하는 것을 잊지 마십시오. https://github.com/goodybag/ti-infini-scroll