0

我正在开发 Sencha 触摸应用程序。

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

我已经使用 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%;
}

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

4

2 回答 2

1

如果您tpl用于生成列表项，只需给您的列表项一个类名，例如：

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

然后更改您设置为列表的bgimage属性，data应该这样做：

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

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

.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配置），只需cls在每个项目上设置配置即可获得相同的结果。

于 2013-07-12T12:24:52.237 回答
0

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

于 2013-07-12T11:46:19.387 回答