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

测量面板的 fps

panel.scroller.getLastActualFps();

我尝试使用Chrome 浏览器 ，方法返回约 60 fps。在 iPad 上，方法返回 ~0.25 fps。

我正在考虑构建一个“精简版”滚动器组件，禁用大量事件和侦听器。你怎么认为？ Scroller组件对于大内容居然有这个问题？

Answer 1

我有同样的问题，发现默认 fps（每秒帧数）间隔是 80！对于 iOS，这意味着 sencha 滚动器每秒运行 setInterval(someDecelerationAndBounceFunction, 1000/80) 80 次。

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

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

就我而言，

它解决了问题。顺便说一句，我在 iScroll 和 TouchScroll 上遇到了同样的问题......