2014-12-07 20 views
5

Wenn ich versuche, nach links/rechts zu wischen, scrollt mein App-Inhalt auch vertikal, wodurch unordentliches UX entsteht. Gibt es einen Weg, das zu verhindern? DieseSo verhindern Sie vertikales Scrollen beim Wischen nach links/rechts

ist, wie ich Swipe

// angular directive 
link: function(scope, element, attrs) { 
     $ionicGesture.on('swiperight', function(){console.log("swiped");}, element); 
} 
+0

bitte umformuliert überprüfen antworte und gebe Feedback, wenn es möglich ist ... – Manube

+0

@Manube Entschuldigung, ich habe keine Möglichkeit/Zeit, dies noch einmal zu überprüfen, ich benutze jetzt nicht einmal Ionen, lass die Community damit umgehen, Es gibt ziemlich viele interessierte Leute. – Anri

+0

Ok, kein Problem, danke für deine Antwort – Manube

Antwort

4

VORWORT: Diese Lösung wurde komplett neu formuliert, nachdem die Kompatibilität mit iOS- und Android-Umgebungen sichergestellt wurde. Die folgenden Kommentare gelten möglicherweise nicht mehr; Jede Rückmeldung ist willkommen.


JA, gibt es eine Möglichkeit, App-Inhalte zu verhindern, Scrollen, wenn Sie horizontal Swipe: durch eine AngularJS tapDetector Richtlinie mit ionischen $ionicScrollDelegate Service kombiniert.

Wir müssen auch die Swipe-Erkennung mit sehr schnell dom Ereignisse Erkennung (mousedown/touchstart, mousemove/touchmove, mouseup/touchend); es ist notwendig, weil $ionicGesture Event-Listener den Swipe nach dem Scrollen erkannt hat: Erkennung für Swipe in ionischen ist zu langsam für unseren Zweck.

<body ng-controller="MyCtrl" tap-detector> 

Und hier ist der Code für die Richtlinie:


Die tapDetector Richtlinie ist wie so auf dem Körper platziert

.directive('tapDetector',function($ionicGesture,$ionicScrollDelegate){ 
    return{ 
    restrict:'EA', 
    link:function(scope,element){ 
     var startX,startY,isDown=false; 
     element.bind("mousedown touchstart", function(e){ 
     e=(e.touches)?e.touches[0]:e;//e.touches[0] is for ios 
     startX = e.clientX; 
     startY = e.clientY; 
     isDown=true; 
     //console.log("mousedown",startX,startY); 
     }); 

     element.bind("mousemove touchmove", function(e){ 
     e=(e.touches)?e.touches[0]:e;//e.touches[0] is for ios 
     if(isDown){ 
      var deltaX = Math.abs(e.clientX - startX); 
       var deltaY = Math.abs(e.clientY - startY); 

      if(deltaX > deltaY) { 
      //console.log("horizontal move"); 
      $ionicScrollDelegate.$getByHandle('mainScroll').freezeScroll(true); 
      } 
     } 
     }); 

     element.bind("mouseup touchend", function(e){ 
     isDown=false; 
     $ionicScrollDelegate.$getByHandle('mainScroll').freezeScroll(false); 
     //console.log("mouseup touchend"); 
     }); 
    } 
    } 
}) 

Wenn Sie den Bildschirm (Vorbereitung berühren Zum Überstreichen) werden die Koordinaten der Berührung eingestellt (startX, startY) und isDown wird auf wahr gesetzt.

Wenn Sie mit dem Wischen beginnen, müssen Sie feststellen, ob der Wischvorgang horizontal oder vertikal ist. Wir interessieren uns nur für horizontalen swipes:

var deltaX = Math.abs(e.clientX - startX); 
var deltaY = Math.abs(e.clientY - startY); 

deltaX ist die Differenz (delta) zwischen original X und X Strom; deltaY ist die Differenz (Delta) zwischen Original Y und Strom Y;

if (deltaX > deltaY) 

Wir haben eine horizontale Swipe!

Nun ist der Durchzug wurde schnell genug erkannt wird, alles, was getan werden soll, bleibt dynamisch die Scroll zu verhindern:

$ionicScrollDelegate.$getByHandle('mainScroll').freezeScroll(true); 

und im HTML: <ion-content delegate-handle="mainScroll">


Nach Scroll ist vollständig, wir müssen wieder einfrieren (auftauen?die Scroll):

element.bind("mouseup touchend", function(e){ 
        isDown=false; 
        $ionicScrollDelegate.$getByHandle('mainScroll').freezeScroll(false); 
       }); 

Dies wurde mit iPad 2 getestet und Android Galaxy S4


Fast vergessen: hier ist eine working pen (mit freundlicher Genehmigung von SMR)

+0

@sMr seit du eine Prämie geöffnet hast, überprüfe das bitte und sag mir, ob es funktioniert, also kann ich die Antwort akzeptieren. – Anri

+0

@Anri Ich versuchte die Antwort, aber es frezee den Inhalt beim Wischen .. so lassen Sie uns auf andere Antworten warten bis zum letzten Tag der Bounty – semirturgay

+0

@sMr ja, ich eine willkürliche Verzögerung von 3s vor dem normalen Scrolling-Verhalten fortsetzen; es kann jedoch wie gewünscht verkürzt werden; Bitte geben Sie an, welches genaue Verhalten Sie erwarten: Momentan wird vertikales Scrollen verhindert, nachdem ein Swipe ausgelöst wurde: Ist es nicht erforderlich? – Manube