ionic 左滑删除组件

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;

    }

效果截图:


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容