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

Question

I'm using the no-lines designation in the ion-list tag which removes the lines between each ion-item but it leaves the bottom borders in place which I would like to remove.

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

Here you can see the top line which is the item border from the bottom of the message that I'd like removed and the list border which I'd also like removed and the bottom line is the top of the tabs bar which is exactly where it needs to be. There are no other lines in the list save for these two bottom borders.

Answer 1

For ionic Version 4,You can use below code:

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

Answer 2

I had the same issue when I use ion-item-sliding , I removed it by adding below into my XXXPage scss:

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

Answer 3

i just tried this on a new page on my app:

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

And there is no lines.

I think your template is right, no-lines is working, maybe some of the attr that i delete or classes??

Hope this help you

Answer 4

I have the same issue before, and I found a solution to hide the line in the bottom. This issue may be caught by ion-item-sliding .

You can try this:

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