html代碼:
<ion-list>
? ? ? ? ? ? <ion-item-sliding *ngFor="let item of ways">
? ? ? ? ? ? ? ? <ion-item>
? ? ? ? ? ? ? ? ? ? {{item.title}}
? ? ? ? ? ? ? ? </ion-item>
? ? ? ? ? ? ? ? <ion-item-options>
? ? ? ? ? ? ? ? ? ? <button class="edid" (click)="add=!add">編輯</button>
? ? ? ? ? ? ? ? ? ? <button class="del" (click)="delete(item)">刪除</button>
? ? ? ? ? ? ? ? </ion-item-options>
? ? ? ? ? ? </ion-item-sliding>
? ? ? ? </ion-list>
css代碼:
.list {
? ? ? ? margin: 12px 0;
? ? }
? ? .item {
? ? ? ? padding: 0 14px;
? ? ? ? font-family: PingFang-SC-Medium;
? ? ? ? font-size: 14px;
? ? ? ? color: #2f2f2f;
? ? }
? ? .list .item-block .item-inner {
? ? ? ? border-bottom: 1px solid #eeeeee;
? ? }
? ? .list > .item-wrapper:last-child .item-block {
? ? ? ? border-bottom:1px solid #eeeeee;
? ? }
? ? .edid{
? ? ? ? background-color: #c6c6c5;
? ? ? ? color: #ffffff;
? ? ? ? width: 74px;
? ? ? ? font-size: 14px;
? ? }
? ? .del{
? ? ? ? background-color: #ffb128;
? ? ? ? color: #ffffff;
? ? ? ? width: 74px;
? ? ? ? font-size: 14px;
? ? }
效果截圖:
