美文网首页
ionic 左滑删除组件

ionic 左滑删除组件

作者: 懵懂青春_2478 | 来源:发表于2018-11-27 15:50 被阅读0次

    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;

        }

    效果截图:

    相关文章

      网友评论

          本文标题:ionic 左滑删除组件

          本文链接:https://www.haomeiwen.com/subject/qfngqqtx.html