Sencha Touch - 如何启用无限滚动

Question

查看 Sencha Touch 的文档，列表小部件上似乎有一个选项允许设置 "infinite" 以启用无限滚动。

文档：https://docs.sencha.com/touch/2.3.1/#!/api/Ext.dataview.List-cfg-infinite

我希望这能解决我在便携式设备上处理超大列表时遇到的一些性能问题。

重要说明：这是针对离线移动应用程序的。正如在 fiddle 中一样。该商店已包含所有数据。

我尝试在一个大列表中启用它，但它所做的只是隐藏数据。

{
    xtype: 'list',
    store: 'contactStore',
    flex: 1,
    itemTpl: '<table><tr><td class="contact"><strong>{firstname}</strong> {lastname}</td></tr><tr><td>{companyname}</td></tr><tr><td>{address}, {city}, {province}, {postal}</td></tr><tr><td>{phone1}, {phone2}, {email}</td></tr><tr><td>{web}</td></tr></table>',

    infinite: true /* Setting this to true hides the list */
}

我错过了什么？我已经包含了一个 jsFiddle。

http://jsfiddle.net/AnthonyV/bba58zfr/

Answer 1

首先您需要了解 infinite: true 有助于提高列表性能。它有助于仅呈现当前页面的列表数据块，其余部分不呈现。所以，

对于分页，你的后端应该支持它应该有像limit、start、pageSize等参数
为了实现分页，您的 store 应该具有这些配置，例如 pageSize、buffered 等

因此，如果您的后端支持并且您已经实施 pagination。然后你就可以享受infinite: true的好处，获得极致的sencha touch list性能。

Answer 2

你可以接受这个。添加这个插件，它会自动处理无限滚动。

http://docs.sencha.com/touch/2.4/2.4.0-apidocs/#!/api/Ext.plugin.ListPaging

离线

你可以实现一个想法。创建 2 个商店，第一个完全加载，第二个将只加载一些页面大小假设 10。您将在网格中使用第二个商店并实现列表分页插件，也通过这里第二个商店。您可以在此 fiddle 示例中寻求帮助。（此示例在 Ext jS 5 中，但逻辑相同）

https://fiddle.sencha.com/#fiddle/pim

请试试这个并告诉我们。

Answer 3

这里的问题与其他答案一样与正在加载的数据无关。您说过数据正在加载到商店中，就像您没有将 infinite 设置为 true 时一样，您可以看到数据。

首先，让我们讨论一下 infinite 配置的作用。正如 Anand Gupta 解释的那样，infinite 配置只会呈现适合屏幕的列表项数量（加上一些作为滚动缓冲区）。如果您没有将其设置为 true，则该列表将呈现所有项目并且不管理可见范围。呈现所有项目后，列表可以支持自动调整大小。但是，当 infinite 设置为 true 时，列表需要知道它的大小，以便计算它可以呈现的可见行数。

这就是问题所在，列表没有设置完整大小。您将列表嵌套在一个容器中，并且该容器使用 vbox 布局：

config: {
    title: 'Big List Issue',
    fullscreen: true,
    items: [{
        xtype: 'container',
        layout: 'vbox',
        title: 'Big List',
        items: [{
            xtype: 'list',
            store: 'contactStore',
            id: 'simpleList',
            flex: 1,
            itemTpl: '<table><tr><td class="contact"><strong>{firstname}</strong> {lastname}</td></tr><tr><td>{companyname}</td></tr><tr><td>{address}, {city}, {province}, {postal}</td></tr><tr><td>{phone1}, {phone2}, {email}</td></tr><tr><td>{web}</td></tr></table>',
            striped: true,
            infinite: false
        }]
    }]
}

这在技术上是过度嵌套。过度嵌套是指您在容器中嵌套了一个不需要嵌套在容器中的组件。这是您的代码的未嵌套版本，应该可以按您的需要工作：

config: {
    title: 'Big List Issue',
    fullscreen: true,
    items: [{
        xtype: 'list',
        title: 'Big List',
        store: 'contactStore',
        id: 'simpleList',
        itemTpl: '<table><tr><td class="contact"><strong>{firstname}</strong> {lastname}</td></tr><tr><td>{companyname}</td></tr><tr><td>{address}, {city}, {province}, {postal}</td></tr><tr><td>{phone1}, {phone2}, {email}</td></tr><tr><td>{web}</td></tr></table>',
        striped: true,
        infinite: true,
        variableHeights: true
    }]
}

我在这里所做的是删除容器并将列表作为 MyApp.view.MyIssue 导航视图的直接子项。导航视图使用卡片布局，它将为每个直接子级提供 100% 的高度和宽度，因此允许列表计算它可以在 infinite 设置为 true 时呈现的行数。这是一个 Sencha Fiddle 来显示这个未嵌套的列表：https://fiddle.sencha.com/#fiddle/11v1

换句话说，如果您真的希望列表嵌套在该容器中（嵌套越多，DOM 就越大，因为您创建的组件越多，DOM 就越大，你的应用程序可能响应越慢）然后你可以给容器的 vbox 布局 align config:

config: {
    title: 'Big List Issue',
    fullscreen: true,
    items: [{
        xtype: 'container',
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        title: 'Big List',
        items: [{
            xtype: 'list',
            store: 'contactStore',
            id: 'simpleList',
            flex: 1,
            itemTpl: '<table><tr><td class="contact"><strong>{firstname}</strong> {lastname}</td></tr><tr><td>{companyname}</td></tr><tr><td>{address}, {city}, {province}, {postal}</td></tr><tr><td>{phone1}, {phone2}, {email}</td></tr><tr><td>{web}</td></tr></table>',
            striped: true,
            infinite: true
        }]
    }]
}

在unnested list的例子中，我也使用了list上的variableHeights配置。这允许列表项适当地高度。运行注释掉 fiddle 以查看它的不同之处。

Sencha Touch - 如何启用无限滚动

Sencha Touch - How to enable Infinite Scroll

list

sencha-touch

infinite-scroll