0

我有一个 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 组件对于大内容居然有这个问题？

4

1 回答 1

0

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

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

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

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

顺便说一句，我对 iScroll 和 TouchScroll 有同样的问题......

于 2011-12-21T23:25:10.493 回答