ionic4-左滑实现编辑删除

陈新月-Phyllis

于 2019-03-02 20:01:50 发布

阅读量1.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： ▲项目成长▼ # 实战项目前端 ionic学习文章标签： ionic4 左滑编辑手动关闭

本文链接：https://blog.youkuaiyun.com/csxypr/article/details/88080482

本文介绍了在ionic4项目中如何实现左滑触发编辑删除功能，并解决了左滑事件在点击编辑后无法正常使用的问题。通过添加#slide标识并传递给ts代码，使用close()方法手动关闭左滑框，确保事件的连续性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前提

小咸儿最近参与的项目中，需要实现一个选中某个头脑风暴左滑编辑删除的功能，实现起来很简单，但是小咸儿遇到一个难题。

效果图

在这里插入图片描述

难题

左滑如果不手动关闭，那么左滑事件就不能用了；特别是点击编辑时，会跳转到编辑页面，返回后左滑事件就不能用了。

左滑事件代码模板

<ion-item-sliding>
  		<ion-item>
  		</ion-item>
  		<ion-item-options>
   				<ion-button>
   				</ion-button>
  		</ion-item-options>
</ion-item-sliding>

实际应用的HTML代码

<ion-list style="margin-bottom: 1%">
     <ion-item-sliding *ngFor='let item of brainList; let i = index' #slide>
          <ion-item>
               <ion-row style="width: 100%">
                    <ion-col size

最低0.47元/天解锁文章