Ion list: swipe to delete?

Question

Is it possible to implement “wipes for removal” (for example, on the Android task screen) using the “ion-list”?

I found the "can-swipe" directive that allows you to add some buttons that appear under a partially inverted element, but this is not what I'm looking for. I need to completely scroll the element (both sides) and delete it when it is scrolled to the end of the screen.

Answer 1

Well, it looks like ion-list does not have a built-in swipe-to-delete function.

However, I implemented it using the Hammer plugin for Angular.js and some custom directives and logic. This allowed us to make lists of elements whiskable. And then I used How to remove an element from scope in AngularJS? technology for removing relevant items.

Answer 2

I do not recommend doing what Dmitry suggested; there is an easy way to do this.

Use extensible options :

Add #ionItem to #ionItem ion-item and add side="end" and an event (ionSwipe) to the ion-item-options parameters in your HTML.

 <ion-item #ionItem> </ion-item> <ion-item-options side="end" (ionSwipe)="swipedNotification(ionItem)"> <ion-item-option class="notifications-swipe-button" expandable>&nbsp;</ion-item-option> </ion-item-options> 

And in your CSS, set the button width to 30 pixels so that you can run ionSwipe, which does not get called if the width is too large:

 .notifications-swipe-button{ width: 30px; } 

And in your ts file, add your function, which will be called (ionSwipe) in your HTML, and (ionSwipe) content is completely on the left:

 swipedNotification(el){ el.el.style.transform = 'translate3d(calc(-100vw), 0px, 0px)'; } 

Keep in mind this is configured to swipe left to reject, if you want to swipe right, you will have to update the x property in translate3d.