使用 Sencha Touch 应用程序覆盖列表项

Question

我正在开发一个带有列表的 Sencha Touch 应用程序，特别是在一个列表中我们有（例如）400 个不同的项目，并且有必要包含参数 infinite: true 以提高视图中的性能。

但我看起来很奇怪，这些项目与下一个项目重叠..

我的代码是：

xtype        : 'list',
cls          : 'mweb-list',
useComponents: true,
maxItemCache: 30,
useHeaders   : false,
infinite   : true,

当我包含 infinite 参数时会发生此行为..

组件cls没有css规则，这里可以查看扩展组件：

Ext.define('xx.components.list.BaseListComponent', {
  extend: 'Ext.dataview.List',
  xtype : 'mwebBaseListComponent',

  config: {
    cls          : 'mweb-list',
    useComponents: true,
    emptyText    : '',
    loadingText  : '',
    useHeaders   : false
  }
});

有线索吗？？

提前致谢。

Answer 1

当您使用infinite: true时，您可以使用itemHeight 属性设置每个列表项的高度（以像素为单位）。

xtype        : 'list',
cls          : 'mweb-list',
useComponents: true,
maxItemCache: 30,
useHeaders   : false,
infinite   : true,
itemHeight : 80

Answer 2

您可能想要使用标志 variableHeights:true。

xtype        : 'list',
cls          : 'mweb-list',
useComponents: true,
maxItemCache: 30,
useHeaders   : false,
infinite   : true,
variableHeights: true,

除此之外，您的 mweb-list 可能设置为普通列表，但不遵循无限列表的结构。如果 variableHeights 没有帮助，请 post 您的 css 代码。

css:

.mweb-list {
    --> post whatever is in here
}

使用 Sencha Touch 应用程序覆盖列表项

Overlaying in list items with Sencha Touch app

javascript

sencha-touch