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,6 MB的文本。是的，内容太多了。但是，当我尝试在ipad 1中运行它时，在面板加载后，滚动效果不能顺利运行。它冻结1~2秒，滚动一点，再次冻结，然后完成。

我尝试使用

测量面板的fps

panel.scroller.getLastActualFps();

在Chrome浏览器上，方法返回~60 fps。在iPad上，方法返回~0.25 fps。

我正在考虑构建一个'lite'滚动组件，禁用很多事件和监听器。你怎么看？ Scroller组件实际上存在大内容的这个问题吗？

Answer 1

我有同样的问题，发现默认的fps（每秒帧数）间隔是80！对于iOS而言，它意味着sencha卷轴每秒运行setInterval（someDecelerationAndBouncingFunction，1000/80）80次。

我建议尝试减少fps选项。说25

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

就我而言，它解决了问题。

顺便说一句，与iScroll和TouchScroll相同的问题...

Scroller组件和Sencha Touch中的大量内容问题

1 个答案: