离子列表项底部边距答案

【问题标题】：Ionic list-item bottom margin离子列表项底部边距
【发布时间】：2015-11-21 03:12:21
【问题描述】：

我有一个离子列表，它有一个打开状态，可以将类更改为不同的背景颜色：

.opened .item-content{
   background-color: #c4c4c4 !important;
}

结果会在列表项下方显示一个小白边。有没有办法删除它？（注意，当我滑动项目时，我还在那个小边距中使用选项按钮及其颜色，而不管项目的背景颜色如何）

Ionic Play

【问题讨论】：

你能创建一个演示吗？ play.ionic.io
@ManojKumar play.ionic.io/app/12da98736cb3

标签： css ionic-framework ionic

【解决方案1】：

小空白是由父元素的背景颜色引起的。您可以使用相同的背景颜色覆盖它：

.opened.item {
  background-color: #c4c4c4;
}

将项目的高度设置为增加 1px 以覆盖空间。

.item {
  height: 101px;
}

Updated Ionic

【讨论】：

谢谢，但是这解决了“打开”的问题，如果你滑动未打开的，可以看到那个小边缘的颜色。
那行得通，添加了一个新类（item-collection）而不是“item”，因为它正在更改其他列表！谢谢！
@Wigiri 没问题！ :)

【解决方案2】：

似乎是collection-repeat 的问题。使用ng-repeat 可以解决问题。

http://play.ionic.io/app/f1d2eb83ee03

<ion-item ng-class="{'opened item-content':item.state}" class="item item-thumbnail-left" ng-repeat="item in news" href="#/feed/{{item.source}}/{{item.link}}/{{item.title}}" ng-click="openNews(item, 'open')">

【讨论】：

感谢您指出这一点，问题是我有超过 500 个项目并且 ng-repeat 变得非常缓慢