Sencha Touch 中的滚动组件和大内容问题答案

【问题标题】：Issue with Scroller Component and large content in Sencha TouchSencha Touch 中的滚动组件和大内容问题
【发布时间】：2011-12-22 07:25:10
【问题描述】：

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

【问题讨论】：

如果在滚动配置中包含 momentum: false 会发生什么？

标签： javascript ipad sencha-touch scroller

【解决方案1】：

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

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

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

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

顺便说一句，我在使用 iScroll 和 TouchScroll 时遇到了同样的问题...

【讨论】：