Ionic2 ion-list，如何去除底部边框？

Question

我在 ion-list 标签中使用了 no-lines 指定，它删除了每个 ion-item 之间的行，但它留下了我想删除的底部边框。

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 可能会发现此问题。

你可以试试这个：

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

Answer 3

我在使用 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 4

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

<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 或类？？

希望对你有帮助