如何美元刷卡左/右p $ pvent垂直滚动 [英] How to prevent vertical scroll on swipe left/right
问题描述
当我尝试刷卡左/右我的应用程序内容也是垂直滚动创造凌乱UX。有没有一种方法，以prevent呢？
这是我如何处理刷卡
//角指令
链接：功能（范围，元素，ATTRS）{
$ ionicGesture.on（'swiperight'，函数（）{的console.log（刷卡）;}，元素）;
}
前言：这个解决方案，确保既iOS和Android环境的兼容性后转述完全;下面的评论可能不再适用;任何反馈意见是值得欢迎的。
是，有一种方法，从当你水平滑动滚动prevent应用内容：通过结合angularjs tapDetector 指令与离子 $ ionicScrollDelegate 服务。
我们还需要使用非常快的DOM事件检测（检测刷卡鼠标按下 / touchstart ，鼠标移动 / touchmove ，鼠标松开 / touchend ）;
这是必要的，因为 $ ionicGesture 事件监听器检测滚动已经完成后，刷卡：检测离子刷卡是减缓我们的目的
的 tapDetector 指令放在身体像这样：
＆LT;机身NG控制器=MyCtrl抽头探测器＆GT;
这里是code的指令：
.directive（'tapDetector'，函数（$ ionicGesture，$ ionicScrollDelegate）{
返回{
限制：EA，
链接：功能（范围，元素）{
变种运行startx，startY，isDown = FALSE;
element.bind（鼠标按下touchstart功能（E）{
E =（e.touches）e.touches [0]：电子; // e.touches [0]是IOS
运行startx = e.clientX;
startY = e.clientY;
isDown = TRUE;
//console.log(\"mousedown\",startX,startY）;
}）; element.bind（鼠标移动touchmove功能（E）{
E =（e.touches）e.touches [0]：电子; // e.touches [0]是IOS
如果（isDown）{
VAR DELTAX = Math.abs（e.clientX - startx的）;
VAR DELTAY = Math.abs（e.clientY - startY）; 如果（DELTAX＆GT; DELTAY）{
//console.log(\"horizontal招）;
$ ionicScrollDelegate $ getByHandle（'mainScroll'）freezeScroll（真）。
}
}
}）; element.bind（鼠标松开touchend功能（E）{
isDown = FALSE;
$ ionicScrollDelegate $ getByHandle（'mainScroll'）freezeScroll（假）。;
//console.log(\"mouseup touchend）;
}）;
}
}
}）
当你触摸屏幕（preparation为刷卡），触摸的坐标设置（startx的，startY）和 isDown 设置为true。
当你开始刷卡，我们需要确定刷卡是水平的还是垂直的。我们只在水平挥笔感兴趣的是：
VAR DELTAX = Math.abs（e.clientX - startx的）;
VAR DELTAY = Math.abs（e.clientY - startY）;
DELTAX 是原来的X和当前的X之间的差异（增量）; DELTAY 是原来的Y和当前y之间的差异（增量）;
如果（DELTAX＆GT; DELTAY）
我们得到了一个横向轻扫！
现在已经检测到刷卡速度不够快，所有剩下来要做的就是动态prevent滚动：
$ ionicScrollDelegate $ getByHandle（'mainScroll'）freezeScroll（真）。
和在HTML：＆LT;离子含量委托手柄=mainScroll＆GT;
滚动完成后，我们必须取消冻结（解冻？）滚动：
element.bind（鼠标松开touchend功能（E）{
isDown = FALSE;
$ ionicScrollDelegate $ getByHandle（'mainScroll'）freezeScroll（假）。;
}）;
这是与iPad 2进行测试
和Android的Galaxy S4
差点忘了：这里是一个工作笔（礼貌SMR）
When I try to swipe left/right my app content also scrolls vertically creating messy UX. Is there a way to prevent it?
This is how I handle swipe
// angular directive
link: function(scope, element, attrs) {
$ionicGesture.on('swiperight', function(){console.log("swiped");}, element );
}
FOREWORD: This solution was entirely rephrased after ensuring compatibility with both ios and android environments; comments below may no longer apply; any feedback is welcome.
YES, there is a way to prevent app content from scrolling when you swipe horizontally: by combining an angularjs tapDetector directive with ionic $ionicScrollDelegate service.
We will also need to detect the swipe using very fast dom events detection (mousedown/touchstart, mousemove/touchmove, mouseup/touchend);
it is necessary because $ionicGesture event listener detects the swipe after the scroll has been done: detection for swipe in ionic is to slow for our purpose.
The tapDetector directive is placed on body like so:
<body ng-controller="MyCtrl" tap-detector>
And here is the code for the directive:
.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");
});
}
}
})
When you touch the screen (preparation for swipe), the coordinates of touch are set (startX, startY) and isDown is set to true.
When you start swiping, we need to determine whether swipe is horizontal or vertical. We are only interested in horizontal swipes:
var deltaX = Math.abs(e.clientX - startX);
var deltaY = Math.abs(e.clientY - startY);
deltaX is the difference (delta) between original X and current X;
deltaY is the difference (delta) between original Y and current Y;
if (deltaX > deltaY)
We got an horizontal swipe!
Now the swipe has been detected fast enough, all that is left to be done is to dynamically prevent the scroll:
$ionicScrollDelegate.$getByHandle('mainScroll').freezeScroll(true);
and in the HTML: <ion-content delegate-handle="mainScroll">
After scroll is complete, we must un-freeze (thaw?) the scroll:
element.bind("mouseup touchend", function(e){
isDown=false;
$ionicScrollDelegate.$getByHandle('mainScroll').freezeScroll(false);
});
This was tested with iPad 2 and Android Galaxy S4
Almost forgot: here is a working pen (courtesy of sMr)
这篇关于如何美元刷卡左/右p $ pvent垂直滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
