ionic4-左滑实现编辑删除

最新推荐文章于 2021-07-31 14:28:53 发布

原创

最新推荐文章于 2021-07-31 14:28:53 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ionic4 #左滑编辑 #手动关闭

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

前提

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

效果图

在这里插入图片描述

难题

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

左滑事件代码模板

<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='4' (click)='gotoBrainlistt(i)'>
                         <ion-row>