2014-12-07 13 views
5

Sola/sağa kaydırmaya çalıştığımda, uygulama içeriğim de dikey olarak kaydırılarak UX'ye neden oluyor. Bunu engellemenin bir yolu var mı?Sağa/sola kaydırmada dikey kaydırma nasıl engellenir

Bu benim tokatlamak

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

yeniden formüle kontrol ediniz cevap ver ve geri bildirim sağladığında ... – Manube

+0

@Manube özür dilerim, artık bunu kontrol etme yolum/zamanım yok, şimdi bile iyonik kullanmam, toplumun onunla başa çıkmasına izin verme, oldukça az ilgili insan var. – Anri

+0

Tamam, sorun değil, cevabınız için teşekkürler. – Manube

cevap

4

ÖNSÖZ: Hem ios hem de android ortamları ile uyum sağlandıktan sonra bu çözüm tamamen yeniden ifade edildi; Aşağıdaki yorumlar artık geçerli olmayabilir; herhangi bir geri bildirim açığız. iyonik $ionicScrollDelegate hizmetiyle bir angularjs tapDetector direktifini birleştirerek:


EVET, yatay kaydırma yaptığınızda kaydırma gelen uygulama içeriği engellemek için bir yol yoktur.

Ayrıca (mousedown/touchstartmousemove/touchmove, mouseup/touchend) çok hızlı dom etkinlik tespit kullanılarak tokatlamak tespit etmek gerekir; , kaydırma işlemi tamamlandıktan sonra $ionicGesture olay dinleyicisinin tokatlamayı algılaması nedeniyle gereklidir: İyonik kaydırma işlemi amacımız için yavaşlatmaktır.

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

Ve burada direktif kodudur:


tapDetector direktif şöyle gövde üzerine yerleştirilir

.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"); 
     }); 
    } 
    } 
}) 

ekrana dokunduğunuzda (hazırlık tokatlamak için), dokunmatik koordinatlar ayarlanır (startX, startY) ve isDown, true olarak ayarlanır.

Kaydırmaya başladığınızda, kaydırmanın yatay mı yoksa dikey mi olduğunu belirlemeliyiz. Biz yatay kaydırma hareketiyle sadece ilgilenen:

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

deltaX orijinal X ve cari X arasındaki fark (delta) 'dir; deltaY, orijinal Y ile geçerli Y arasındaki farktır (delta);

if (deltaX > deltaY) 

Yatay bir kaydırmaya sahibiz!

Şimdi tokatlamak tüm bu dinamik kaydırma önlemek için yapılması gereken bir bırakılır, yeterince hızlı algılandı:

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

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


kaydırma sonra tamamla, dondurulmalı mıyız (çözülmeli?) Kaydırma:

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

Bu Neredeyse unuttum


iPad 2 ve Android Galaxy S4 ile test edilmiştir: Burada SMR bir working pen (nezaket) 'dir

+0

@sMr, bir ödül açtığınızdan beri lütfen bunu kontrol edin ve çalışıp çalışmadığını söyleyin, böylece cevabı kabul edebilirim. – Anri

+0

@Anri cevabı denedim ama swiping sırasında içeriği frezee .. bu yüzden – semirturgay

+0

(Mm) Evet, başka bir cevap bekleyelim normal kaydırma davranışı devam ettirmeden önce 3s keyfi gecikme koymak; Gerçi dilediğiniz gibi kısaltılabilir; Lütfen tam olarak hangi davranışı beklediğinizi belirtin: Hemen bir kaydırma tetiklendikten sonra dikey kaydırma engellenir: Gerekli olan değil mi? – Manube

İlgili konular