2017-04-26 60 views
1

我在离子列表标记中使用了无线标记,该标记除去每个离子项之间的线条,但它将底部边框留在了我想要移除的位置。Ionic2离子列表,你如何去除底部边界?

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

在这里你可以看到最上面一行是从消息底部的项目边界,我想删除,列表边框,我也想要删除,底部是标签栏的顶部,这正是它需要的地方。除了这两个底部边框之外,列表中没有其他行。

enter image description here

回答

0

我只是想这是一个新的网页上我的应用程序:

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

而且没有线。 enter image description here

我认为你的模板是正确的,没有线路正在工作,也许一些attr,我删除或类?

希望这有助于你

+0

感谢费尔南多但至今没有运气。 。 。 – rashadb

+0

与您的信息我不能做更多,你尝试了铬开发工具,并检查项目,看看哪一个有边界,然后在scss使它隐藏? –

0

之前我有同样的问题,我找到了解决隐藏在底部的线条。这个问题可能被ion-item-sliding所捕获。

你可以试试这个:

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