Sencha Touch-如何启用无限滚动 [英] Sencha Touch - How to enable Infinite Scroll

问题描述

在文档中查找Sencha Touch，似乎在列表"小部件上有一个选项可以设置无限"，从而启用无限滚动.

Looking in the Docs for Sencha Touch there seems to be an option on the List widget that allows for setting "infinite" which enables infinite scroll.

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

我希望这可以解决便携式设备上的大量列表所带来的性能问题.

I am hoping this will resolve some issues that I have with performance with very large lists on portable devices.

重要说明:这是针对脱机移动应用程序的.就像在小提琴中一样.该商店已经包含了所有数据.

Important Note: This is for an offline mobile app. As in the fiddle. The store already contains all of the data.

我试图在一个很大的列表上启用它，但是它所做的只是隐藏数据.

I tried enabling it on a large list but all it does is hide the data.

{
    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.

What am I missing? I have included a jsFiddle.

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

推荐答案

与其他答案一样，这里的问题与正在加载的数据无关.您已经说过，将数据加载到存储库中就好了，就像没有将infinite设置为true时一样，您可以看到数据.

The issue here isn't anything about the data being loaded like the other answers. You have said the data is being loaded into the store just fine as when you don't have infinite set to true you can see the data.

首先，让我们讨论infinite配置的作用.正如Anand Gupta解释的那样，infinite配置将仅呈现可以在屏幕上容纳的列表项的数量(加上一些作为滚动缓冲区).如果您未将其设置为true，则该列表将呈现所有项目，而不管理可见范围.渲染所有项目后，列表可以支持自动调整大小.但是，当infinite设置为true时，列表需要知道其大小才能计算其可以呈现的可见行数.

First, let's discuss what the infinite config does. As Anand Gupta explained, the infinite config will only render the number of list items that can fit on the screen (plus some as a buffer for scrolling). If you don't have it set to true then the list will render all items and not manage a visible range. With all items rendered, the list can support auto sizing. However, when infinite is set to true, the list needs to know what size it has in order to calculate the number of visible rows it can render.

这是发生问题的地方，列表未设置完整尺寸.您将列表嵌套在一个容器中，并且该容器使用vbox布局:

This is where the issue happens, the list doesn't have a full size set to it. You have the list nested in a container and that container uses vbox layout:

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
        }]
    }]
}

从技术上讲，这太过分了.过度嵌套是指您在容器中嵌套了不需要嵌套在容器中的组件时.这是代码的未嵌套版本，可以根据需要运行:

This is technically overnesting. Overnesting is when you have nested a component within a container that doesn't need to be nested within the container. This is an unnested version of your code that should work as you want:

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小提琴，用于显示此未嵌套的列表: https://fiddle.sencha.com/#小提琴/11v1

What I did here is remove the container and had the list as a direct child of your MyApp.view.MyIssue navigation view. The navigation view uses card layout which will give each direct child 100% height and width and therefore allowing the list to calculate the number of rows it can render with infinite set to true. Here is a Sencha Fiddle to show this unnested list in action: https://fiddle.sencha.com/#fiddle/11v1

反之，如果您真的希望列表嵌套在该容器中(嵌套的越多，则DOM越大，因为创建了更多的组件，而DOM越大，则您的应用响应速度可能越慢)，那么您可以为容器的vbox布局提供align配置:

The other way, if you REALLY wanted the list to be nested in that container (the more you nest, the bigger the DOM since you have more components created and the bigger the DOM, the slower your app may respond) then you can give the container's vbox layout the 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
        }]
    }]
}

在未嵌套的列表示例中，我还使用列表上的variableHeights配置.这样可以正确列出列表项.运行提琴，将其注释掉，以查看它的不同之处.

In the unnested list example, I also use the variableHeights config on the list. This allows the list items to be properly heighted. Run the fiddle with it commented out to see the difference it makes.

这篇关于Sencha Touch-如何启用无限滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！