html – Ionic2离子列表,你如何删除底部边框？

2023年10月3日 223次阅读

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

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

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

《html – Ionic2离子列表,你如何删除底部边框？》

最佳答案
《html – Ionic2离子列表,你如何删除底部边框？》

《html – Ionic2离子列表,你如何删除底部边框？》

当我使用离子项滑动时,我遇到了同样的问题,我通过在下面添加到我的XXXPage scss中删除它：

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