ionic 左滑删除组件

2018-11-27  本文已影响0人  懵懂青春_2478

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;

    }

效果截图:

上一篇 下一篇

猜你喜欢

热点阅读