Ionic2离子列表，你如何删除底部边框？

Question

我在离子列表标签中使用了无线标识，它删除了每个离子项之间的线条，但它留下了我想要删除的底部边框。

removeBorder.html

<ion-content>
  <ion-list no-lines>
    <ion-item-sliding *ngFor="let message of Messages">
      <ion-item>
        <ion-thumbnail item-left>
          <img src="{{message.logo._url}}">
        </ion-thumbnail>
        <ion-item class="blurb" text-wrap  detail-push>{{message.message}}</ion-item>
      </ion-item>
      <ion-item-options side="left">
        <button ion-button color="custom" (click)="more()">More</button>
      </ion-item-options>
      <ion-item-options side="right">
        <button ion-button color="light" (click)="other()">Other</button>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
</ion-content>

removeBorder.scss

.blurb {
 font-size: 11px;
 font-family: 'Arial', sans-serif;
 color: #585b60;
 text-transform: none;
 text-overflow: visible;
}

在这里你可以看到顶行是我想要移除的消息底部的项目边框和我也想删除的列表边框，底行是标签栏的顶部，这正好在哪里它需要。 除了这两个底部边框之外，列表中没有其他行。

Answer 1

对于离子版本4，您可以使用以下代码：

<ion-item lines="none">
</ion-item>

Answer 2

当我使用ion-item-sliding ，我遇到了同样的问题，我通过在下面添加到我的XXXPage scss中删除它：

  .list-ios > .item-block:last-child, .list-ios > .item-wrapper:last-child .item-block {
    border-bottom: 0 solid #c8c7cc !important;
  }

Answer 3

我只是在我的应用程序的新页面上尝试了这个：

<ion-list no-lines>
  <ion-item-sliding>
    <ion-item>
      <ion-thumbnail item-left>
        <img src="">
      </ion-thumbnail>
      <ion-item text-wrap></ion-item>
    </ion-item>
    <ion-item-options side="left">
      <button ion-button color="custom">More</button>
    </ion-item-options>
    <ion-item-options side="right">
      <button ion-button color="light">Other</button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

而且没有线条。

我认为你的模板是正确的，没有行是工作，也许我删除或类的一些attr？

希望这对你有所帮助

Answer 4

我之前有同样的问题，我找到了一个隐藏底部线的解决方案。 ion-item-sliding可能会捕获此问题。

你可以试试这个：

<ion-list no-lines style="border: none;">
    //...
</ion-list>