Ionic 2 列表全宽分隔线答案

【问题标题】：Ionic 2 list full width dividerIonic 2 列表全宽分隔线
【发布时间】：2017-10-15 22:04:20
【问题描述】：

我目前在 Ionic 2 应用程序上有一个列表，分隔线仅在最后一个元素上是全宽的。结果如下：

我希望所有元素都带有全宽边框。在文档中找不到任何关于此的内容.. 提前感谢您的帮助！

编辑：这是我的代码：

<ion-list no-padding="">
    <ion-item *ngFor='let like of likes' (click)="goTo(like.qrcode)" text-wrap>
        <ion-thumbnail item-left>
            <img class="item item-thumbnail-left" [src]="like.logo">
        </ion-thumbnail>
        <h2>{{like.name}}</h2>
        <h3 class="establishment">{{like.type}}<br /></h3>
        <p class="establishment">{{like.city}}<br /></p>
        <!--<button ion-button clear item-right>View</button>-->
    </ion-item>
</ion-list>

【问题讨论】：

分享你的代码

标签： angular typescript ionic2 ionic3

【解决方案1】：

/* V3: Full line under items having no-line */
.item-cover {
    border-bottom: 1px solid #dedede;
}

【讨论】：

【解决方案2】：

我在 ionic 4 上遇到过它，下面是我的答案。

HTML

 <ion-list lines="none">
    <ion-item class="bottom-border" *ngFor="..">
      <ion-label>Pokémon Yellow</ion-label>
    </ion-item>
  </ion-list>

.scss

.bottom-border{
  border-bottom: 1px solid #e8e8e8;
}

请务必使用lines="none" 删除现有行

【讨论】：

【解决方案3】：

您可以通过使用no-lines 属性来做到这一点（为了隐藏没有全宽的边框）并添加自定义样式规则以在这些项目中添加边框。请查看this plunker。

所以在你看来：

  <ion-list>
      <ion-item no-lines class="bottom-border" *ngFor="..">
          ...
      </ion-item>
  </ion-list>

然后在.scss文件中：

.item[no-lines].bottom-border { 
    border-bottom: 1px solid grey; 
}

【讨论】：

谢谢，我没想过只用 CSS 来做 :-)