Question

我正在研究Sencha touch应用程序。

我使用sencha touch的Ext.list组件创建了列表视图。

我使用CSS

为所有列表项设置了背景图像

.x-list .x-list-item {
 position: absolute !important;
 left: 0;
 top: 0;
 width: 100%;
 height:20px;
 background: url('../images/list_1.png');
 background-repeat: no-repeat;
 background-size: 97% 98%;
}

现在我想为不同的列表项设置不同的图像。这可能吗？

Answer 1

如果您使用tpl生成列表项，只需为列表项指定类名，例如：

tpl: '<div class="{bgimage}">This is list item 1.</div>'

然后更改您设置为列表的bgimage的{{1}}属性，类似这样的内容：

data

然后在你的CSS / SASS中，你可以做到

prepareData: function(data, index, record) {
    data.bgimage = "bg-" + index;
}

您可以根据自己的需要对其进行自定义，但这应该可以让您入门。

如果你正在使用列表项组件（即你的列表没有.x-list-item.bg-1 { background-image: url('../images/list_1.png') } .x-list-item.bg-2 { background-image: url('../images/list_2.png') } …配置而是tpl配置），只需在每个项目上设置itemCmp配置即可获得同样的结果。

Answer 2

如果使用nth-child定位它们不起作用，则可能必须使用更麻烦的路径并将单独的类附加到html中的每个列表项，然后通过更改每个列表项的背景属性来操作CSS中的背景图像单独

在sencha touch中将不同的背景图像设置为Ext.list

2 个答案: