Scroller 관련 문제 Sencha Touch의 구성 요소와 내용이 많습니다.

Question

간단한 패널과 함께 Sencha Touch 응용 프로그램이 있습니다.

var scrolling = new Ext.Application({ 
     launch : function() { 

      var titlebar = { 
       dock : 'top', 
       xtype : 'toolbar', 
       title : 'Scrolling Test' 
      }; 

      new Ext.Panel({ 
        fullscreen : true, 
        id : 'panel', 
        scroll : { 
         direction : 'vertical', 
         eventTarget : 'parent' 
        }, 
        dockedItems : [titlebar], 
        styleHtmlContent : true, 
        html : '' 
       }); 
     } 
}); 

이 패널은 Ext.Ajax.request 응답으로 채워집니다.

Ext.Ajax.request({ 
    url : 'largefile.html', 
    success : function (response) { 
     Ext.getCmp('panel').update(response.responseText); 
    }, 
    failure : function (response) {} 
}); 

응답의 크기는 약 1,6MB입니다. 예, 너무 많은 콘텐츠입니다. 그러나 ipad 1에서 실행하려고하면 패널이로드 된 후 스크롤 효과가 원활하게 실행되지 않습니다. 1 ~ 2 초 동결하고, 조금씩 스크롤하고, 다시 얼린 후 끝냅니다.

내가 크롬 브라우저에

panel.scroller.getLastActualFps(); 

를 사용하여 패널의 FPS를 측정하려고 방법은 ~ 60 FPS를 반환합니다. iPad에서는 메소드가 ~ 0.25fps를 반환합니다.

나는 '라이트'스크롤러 구성 요소를 구축하여 많은 이벤트와 청취자를 사용할 수 없게 만들고 있다고 생각했습니다. 어떻게 생각해? Scroller 구성 요소는 실제로 큰 내용에 대해이 문제가 있습니까?

Answer 1

동일한 문제가 있으며 기본 fps (초당 프레임 수) 간격이 80임을 알았습니다! iOS의 경우 sencha 스크롤러가 setInterval (someDecelerationAndBouncingFunction, 1000/80)을 초당 80 회 실행 함을 의미합니다.

적은 fps 옵션을 사용해 보시기 바랍니다. 25

scroll : { 
      direction : 'vertical', 
      eventTarget : 'parent', 
      fps : 25, 
     }, 

제 경우에는 문제가 해결되었습니다.

Btw는

, 내가 iScroll과 TouchScroll로했다 동일한 문제 ...