當我嘗試向左/右滑動時，我的應用內容也會垂直滾動以創建凌亂的用戶體驗。有沒有辦法阻止它？如何防止左右滑動時出現垂直滾動
這是我如何處理刷卡
// angular directive
link: function(scope, element, attrs) {
$ionicGesture.on('swiperight', function(){console.log("swiped");}, element);
}
前言：在確保與ios和android環境兼容後，此解決方案完全改寫;下面的評論可能不再適用;歡迎任何反饋。
YES，有防止當你水平滑動滾動的應用程序內容的方式：由angularjs tapDetector指令與離子$ionicScrollDelegate服務相結合。
我們還需要使用非常快的DOM事件檢測，檢測刷卡（mousedown/touchstart，mousemove/touchmove，mouseup/touchend）; 這是必要的，因爲$ionicGesture事件監聽器在滾動完成後檢測到滑動：檢測在離子中滑動是否會減慢我們的目的。
的tapDetector指令放在身體像這樣：
<body ng-controller="MyCtrl" tap-detector>
這裏是指令代碼：
.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");
});
}
}
})
當你觸摸屏幕（準備對於滑動），設置觸摸座標（startX，startY）並將isDown設置爲true。
當您開始滑動時，我們需要確定滑動是水平還是垂直。我們只在水平刷卡感興趣：
var deltaX = Math.abs(e.clientX - startX);
var deltaY = Math.abs(e.clientY - startY);
deltaX是原來的X和當前的X之間的差值（DELTA）; deltaY是原始Y與當前Y之間的差異（增量）
if (deltaX > deltaY)
我們得到了一個水平滑動！
現在已檢測到足夠快的刷卡，所有剩下來的事情就是動態地防止滾動：
$ionicScrollDelegate.$getByHandle('mainScroll').freezeScroll(true);
，並在HTML：<ion-content delegate-handle="mainScroll">
滾動後完成後，我們必須解凍（解凍？）滾動：
element.bind("mouseup touchend", function(e){
isDown=false;
$ionicScrollDelegate.$getByHandle('mainScroll').freezeScroll(false);
});
這是與iPad 2 和Android的Galaxy S4測試
差點忘了：這裏是SMR的working pen（禮節）
@sMr自從你打開賞金以後，請檢查這個並告訴我它是否有效，這樣我就可以接受答案。 – Anri 2015-04-01 19:23:37
@Anri我試過了答案，但是它在揮動的時候會使內容飛濺......所以讓我們等待另一個答案，直到最後一天的賞金 – semirturgay 2015-04-03 12:27:40
@sMr是的，在恢復正常的滾動行爲之前，我放置了3秒的任意延遲;儘管如此，它可以按照你的意願縮短。請說明您期望的確切行爲：現在觸發滑動後，可以防止垂直滾動：是不是需要？ – Manube 2015-04-03 12:32:24
目前還沒有從離子球隊API來做到這一點，但我臨時做了一個猴子補丁和功能要求。 https://github.com/driftyco/ionic/issues/2703
請重新回答，並提供反饋時，能夠... – Manube 2015-04-06 17:41:52
@Manube對不起，我沒有辦法/時間再檢查這一點，我甚至不使用離子現在，讓社區處理它，有不少感興趣的人。 – Anri 2015-04-06 21:24:59
好的，沒問題，謝謝你的回覆 – Manube 2015-04-07 04:37:49