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

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

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

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

Ionic Play

【问题讨论】:

标签: 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 变得非常缓慢