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)
bitte umformuliert überprüfen antworte und gebe Feedback, wenn es möglich ist ... – Manube
@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
Ok, kein Problem, danke für deine Antwort – Manube