Ionic-framework: Ionic v2 : (Swipe) gesture does not work at all on some devices

Created on 22 Dec 2016  路  8Comments  路  Source: ionic-team/ionic-framework

Ionic version: (check one with "x")
[x ] 2.x

I'm submitting a ... (check one with "x")
[x ] bug report
[ ] feature request
[ ] support request


Current behavior:

(swipe) gesture does not work at all on some devices. for ex. (swipe)="testEvent($event)" testEvent function is not even called. Devices are random. most of the time it works.

Latest test, 2 devices both One Plus 3 and both runnig Android 6.0.1. Only the difference is one is rooted with cyanogenmod running and other stock oxygen os. (pan) event works on both.

Also , on miui devices the swipe gesture stops working anytime. same testEvent is not called. But , initially swipe works on all miui devices. (pan) not tested.


Expected behavior:

(swipe) event to be consistently working across all devices.


Steps to reproduce:

1.start new v2 app.

  1. add (swipe) to ion-content on any page.
  2. console log event.


    Related code:

<ion-content (swipe)="testEvent($event)">

testEvent(ev){
//console.log(JSON.stringify(ev,null,5));
   console.log("DIRECTION "+ev.direction);

  }


Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Your system information:

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.8
Ionic App Lib Version: 2.1.4
Ionic App Scripts Version: 0.0.36
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v4.1.0
Xcode version: Not installed

Most helpful comment

It's not really recommended to use swipe gestures on the main content. Since ion-content is a input for gestures anyways (scrolling and such) it having swipe on it can just cause confusion. Instead, putting the event handler on a child element works fine.

<ion-content padding>
  <ion-card (swipe)="testEvent($event)">
    <ion-item>
      Swiped: {{swipe}} times
    </ion-item>
  </ion-card>
</ion-content>

All 8 comments

Same problem here. I'm using cordova-android 5.2.2

Your system information:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.47
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v6.9.2
Xcode version: Not installed

For now , I have manually added Hammer.js to project , and using it as per docs at http://hammerjs.github.io/getting-started/ working for now. still need to test on miui devices. But I am sure it will work.

Bad news ! after manual adding , now it does not work on any Android 6.0 device. :( I need some urgent alternative , if anyone can suggest. Adding crosswalk works , but thats not the option.

**This may not be a solution but more of a quick temp fix .. what are you trying to achieve with swiping?

Could you use the ion-slides component instead to mimc the same effect?

@cogoo I am actually using swipe on ion-content. where on swipe event the text content changes. ion-slides does not seem to be a good solution because the content is of 365 days. Swiping changes current date. I don't think I can afford 365 slides. :/ Thanks though

It's not really recommended to use swipe gestures on the main content. Since ion-content is a input for gestures anyways (scrolling and such) it having swipe on it can just cause confusion. Instead, putting the event handler on a child element works fine.

<ion-content padding>
  <ion-card (swipe)="testEvent($event)">
    <ion-item>
      Swiped: {{swipe}} times
    </ion-item>
  </ion-card>
</ion-content>

I had.... to use..... Jquery touch based library....! Which is working flawlessly ! Using it on ion-content itself. So for now it works.

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Was this page helpful?
0 / 5 - 0 ratings