Opening sliding items without scrolling list

Ionic Framework ionic-v3
1

Hello peeps,

My team and I are working on an application built with Ionic 2 and Angular 2. We have a long list composed entirely of sliding items, in which you can swipe an item left to reveal buttons underneath (seen at http://ionicframework.com/docs/v2/api/components/item/ItemSliding/).

However, when attempting to slide an item open, the list jiggles a bit due to the fact that it’s difficult for many users to slide their finger perfectly left without a little bit of leeway up or down. This results in the list moving a little as if you were attempting to scroll.

I was hoping to capture some kind of onSlidingItemOpen event of some sort, to detect when a sliding item was first being opened and thusly somehow disable the scroll of the list and re-enabling the scroll once the item was fully open, but I haven’t been able to find any method or event like that. I’ve also tried multiple types of swipe detection and the seemingly promising onDragStart and onDragEnd gestures, but have also been unable to produce the results I want.

Does anyone have any insight, ideas, or suggestions? Your time is greatly appreciated, and thank you in advance.

2

Could you provide a small demo of this?

http://codepen.io/tlancina/pen/EPBdVE/

3

Thank you for your quick reply. I’ve created a pen at http://codepen.io/ckouns/pen/RaBbeQ, but I cannot for some reason figure out how to get my list to scroll on drag.

However, even though I am working in Ionic 2, the example found at http://ionicframework.com/docs/api/directive/ionList/ is an exact replication of what I want. It seems that when you start sliding an item open, the list does not move an inch. I would like to have that functionality.

At first I believed that it was related to our recently included ion-refresher, in which you pull down to refresh the list, but I am still able to scroll the list up and down when I am mid-open of a sliding item.

4

You can try this:
home.html

   <button ion-button clear (click)="edit(items)">{{ editting ? 'Done' : 'Edit' }}</button>

<div *ngFor=“let item of items” (click)=“viewItem(item)” [class.edit]=“editting”> <button danger (click)=“delete(item)”>
<ion-item [style.transform]=“editting ? ‘translate3d(20px, 0, 0)’: ‘none’”>{{item.title}}

home.ts
export class HomePage {

public items = [];
editting: any;

constructor(public navCtrl: NavController) {

this.items = [
    {title: 'item1'},
    {title: 'item2'},
    {title: 'item3'},
    {title: 'item4'},
    {title: 'item5'},
    {title: 'item6'}
];

}

edit(items) {
this.editting = !this.editting;
}
delete(item) {
for(var i = 0; i < this.items.length; i++) {

  if(this.items[i] == item){
    this.items.splice(i, 1);
  }

}

}
}
and Home.scss

.edit {
position: relative;
ion-item-options[side=left] {
width: 100%;
visibility: visible;
}
ion-item-options {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
}