Swipe cards styling

Ionic Framework ionic-v3
1

Hi evryone,

I am trying to style an itemSliding list item dynamically. When we swipe the item, i want the div to be displayed during. For now, the div is only displayed after the swipe, when the finger goes off the screen… It’s giving me a hard time.

this is a part of my view.html :

<ion-list no-padding no-margin>
      <ion-item-sliding *ngFor="let pea of peas" (ionDrag)="logDrag($event)">
          <ion-item>
              <div [style.display]="isBeeingSwipped">beeing swipped !</div>
          </ion-item>
          <ion-item-options side="left">
          </ion-item-options>
          <ion-item-options side="right">
           </ion-item-options>
        </ion-item-sliding>
</ion-list>

this a part of my controller.ts :

logDrag(drag){
    var dragPercent = drag._openAmount;

    if (dragPercent > 0 ) {
      console.log(dragPercent);
      this.isBeeingSwipped = "block";
    } 
}

Someone helping me on this would be so cool ! Thanks for your answers.

2

Hi there, it’s me again… Doesn’t any one has a clue? This actually still blocks me after 16 days…

3

Hey @charlescc,

you have to work with NgZone… Here is my sample - just adapt it to your piece of code.

import { Component, NgZone } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  peas:any;

  constructor(public navCtrl: NavController, public zone: NgZone) {
    this.testpeas();
  }


  logDrag(card, drag){
      this.zone.run(() => {
        var dragPercent = drag._openAmount;

        if (dragPercent > 0 ) {
          console.log(dragPercent);
          card.isBeeingSwipped = "block";
        } 
      });
  }  

  testpeas() {
    this.peas = [
      { "title": "Card1", "isBeeingSwipped": "none" },
      { "title": "Card2", "isBeeingSwipped": "none" },
      { "title": "Card3", "isBeeingSwipped": "none" },
      { "title": "Card4", "isBeeingSwipped": "none" },
      { "title": "Card5", "isBeeingSwipped": "none" }
    ]
  }

}

and the HTML:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
	<ion-list no-padding no-margin>
		  <ion-item-sliding *ngFor="let pea of peas" (ionDrag)="logDrag(pea,$event)">
			  <ion-item>
				  <span [hidden]="pea.isBeeingSwipped !== 'none'">{{pea.title}}</span>
				  <div [style.display]="pea.isBeeingSwipped">beeing swipped !</div>
			  </ion-item>
			  <ion-item-options side="left">
			  </ion-item-options>
			  <ion-item-options side="right">
			   </ion-item-options>
			</ion-item-sliding>
	</ion-list>
</ion-content>

Just let me know, if this fixed your issue.

Oliver

4

THANK YOU SO MUCH @odorakel !!!

this works perfectly, this is so helpfull, thanks for your help.

5

You’re welcome @charlescc - this is the reason for our community. Good luck with your codings and don’t hesitate to post, if you got an issue.

1 Like