Question

查看Sencha Touch的文档，列表小部件上似乎有一个选项，允许设置“无限”，从而实现无限滚动。

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

我希望这能解决我在便携式设备上使用非常大的列表的性能问题。

重要说明：这适用于离线移动应用。就像小提琴一样。商店已包含所有数据。

我尝试在大型列表中启用它，但它只是隐藏数据。

UPDATE ts
       SET
product_Image=LOAD_FILE('C:\\Users\user\Desktop\aaa\xxx\yyy\TM900.jpg')
    WHERE Brand_Name='TM900';

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

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

Answer 1

这里的问题不是像其他答案那样加载数据。您已经说过数据正在加载到商店中，因为当您没有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
        }]
    }]
}

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

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示例中，我还使用列表中的variableHeights配置。这允许列表项正确地加高。运行小提琴，注释掉它，看看它有什么不同。

Answer 2

首先，您需要了解infinite: true有助于提高列表性能。它有助于只渲染那些当前页面的列表数据，其余部分不会被渲染。所以，

对于分页，您的后端应该支持，例如它应该包含limit，start，pageSize等参数。
为了实施分页，您的store应该包含pageSize，buffered等配置。

因此，如果您的后端支持并且您已实施pagination。然后，您可以享受infinite: true的好处，并获得极端的sencha触摸列表性能。

Answer 3

你可以这样做。添加此插件，它会自动处理无限滚动。

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

离线

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

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

请尝试这个并告诉我们。

Sencha Touch - 如何启用Infinite Scroll

3 个答案: