Kiedy próbuję przesuwać w lewo/w prawo, zawartość mojej aplikacji również przewija się w pionie, tworząc niechlujny UX. Czy istnieje sposób, aby temu zapobiec?Jak zapobiegać przewijaniu w pionie po przesunięciu w lewo/w prawo
ten sposób obsłużyć machnięcia
// angular directive
link: function(scope, element, attrs) {
$ionicGesture.on('swiperight', function(){console.log("swiped");}, element);
}
PRZEDMOWA: To rozwiązanie zostało całkowicie sformatowane po zapewnieniu zgodności ze środowiskiem ios i Android; poniższe komentarze mogą nie mieć zastosowania; wszelkie opinie są mile widziane.
TAK, istnieje sposób, aby zapobiec treści aplikacji przewijanie kiedy przesuń poziomo: przez połączenie angularjs dyrektywę tapDetector z jonowym $ionicScrollDelegate usługi.
Będziemy też trzeba wykryć za pomocą machnięcia detekcję zdarzeń DOM bardzo szybko (mousedown/touchstart, mousemove/touchmove, mouseup/touchend); jest to konieczne, ponieważ detektor zdarzeń $ionicGesture wykrywa przesunięcie po przewinięciu: wykrywanie przesunięcia w jonowym jest wolne w naszym celu.
Dyrektywa tapDetector jest umieszczone na ciele tak:
<body ng-controller="MyCtrl" tap-detector>
A oto kod do dyrektywy:
.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");
});
}
}
})
Po dotknięciu ekranu (przygotowanie do przesunięcia), ustawiane są współrzędne dotyku (startX, startY), a isDown jest ustawione na true.
Po rozpoczęciu przesuwania musimy określić, czy przesuwanie jest w poziomie czy w pionie. Nas interesuje jedynie przesunięcia palcem poziomej:
var deltaX = Math.abs(e.clientX - startX);
var deltaY = Math.abs(e.clientY - startY);
deltaX jest różnicy (delta) między pierwotnym X i prądu X; deltaY to różnica (delta) między oryginalnym Y a bieżącym Y;
if (deltaX > deltaY)
Mamy poziome przesunięcie!
Teraz machnięcia został wykryty na tyle szybko, wszystko, co pozostało do zrobienia jest dynamicznie zapobiec zwój:
$ionicScrollDelegate.$getByHandle('mainScroll').freezeScroll(true);
aw HTML: <ion-content delegate-handle="mainScroll">
Po przewijania jest kompletne, musimy odmrozić (odtajać?) Przewijania:
element.bind("mouseup touchend", function(e){
isDown=false;
$ionicScrollDelegate.$getByHandle('mainScroll').freezeScroll(false);
});
ten został przetestowany z iPada 2 i Android Galaxy S4
Prawie zapomniałem: o to working pen (dzięki uprzejmości SMR)
@sMr odkąd otworzyłeś nagrodę, sprawdź to i powiedz mi, czy działa, więc mogę zaakceptować odpowiedź. – Anri
@Ariri próbowałem odpowiedzi, ale to frezee treści podczas przesuwania .. więc pozwala czekać na kolejne odpowiedzi aż do ostatniego dnia nagrody – semirturgay
@ sMr tak, umieściłem arbitralne opóźnienie 3s przed wznowieniem normalnego zachowania przewijania; może być skrócony, jak chcesz; proszę określić, jakiego dokładnie zachowania oczekujesz: teraz przewijanie w pionie jest blokowane po uruchomieniu machnięcia: czy to nie jest to, co było wymagane? – Manube
Obecnie nie ma API z jonowym zespołu to zrobić, ale tymczasowy wykonany łatkę Małpa i żądania funkcji. https://github.com/driftyco/ionic/issues/2703
sprawdź przeformułować odpowiedzcie i udzielcie opinii, kiedy będziecie w stanie ... – Manube
@Manube przepraszam, nie mam możliwości/czasu na sprawdzenie tego, już nie używam jonów teraz, niech społeczność sobie z tym poradzi, jest sporo zainteresowanych osób. – Anri
OK, nie ma problemu, dziękuję za odpowiedź – Manube