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;
}

在这里，您可以看到顶部线条是消息底部的项目边框，我希望将其移除；列表边框也需要被移除，底部线条是选项卡栏的顶部，位置正好在需要的位置。 列表中没有其他行，仅有这两个底部边框。

- rashadb

Answer 1

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

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

- Maxim

Answer 2

当我使用ion-item-sliding时，遇到了相同的问题，我通过在我的XXX页面scss中添加以下内容来解决：

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

- Haifeng Zhang

Answer 3

我之前也遇到过同样的问题，我找到了解决方案可以隐藏底部的线条。这个问题可能被ion-item-sliding捕获到。

你可以尝试这个方法：

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

- pungun

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>

并且没有线条。

我认为你的模板是正确的，no-lines是有效的，可能是我删除的某些属性或类？

希望这可以帮助你。

- Fernando Del Olmo

---

有了你的信息，我无法做更多。你尝试使用Chrome开发工具并检查项目以查看哪个有边框，然后在SCSS中将其隐藏？ - Fernando Del Olmo