Question

我尝试使用移动应用的滑动效果。我已经测试并努力改变页面。但它非常敏感。很多时候我只想滚动并改变页面。

可以在此事件中修复触摸屏上的敏感度吗？

这是我的代码：

$(document).on('swipeleft', '[data-role="page"]', function(event){    
    if(event.handled !== true) // This will prevent event triggering more then once
    {    
        var nextpage = $(this).next('[data-role="page"]');
        // swipe using id of next page if exists
        if (nextpage.length > 0) {
            $.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true, true);
        }
        event.handled = true;
    }
    return false;         
});

$(document).on('swiperight', '[data-role="page"]', function(event){   
    if(event.handled !== true) // This will prevent event triggering more then once
    {      
        var prevpage = $(this).prev('[data-role="page"]');
        if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true);
        }
        event.handled = true;
    }
    return false;            
});

Answer 1

在jQuery Mobile中，您需要为水平和垂直拖动距离horizontalDistanceThreshold和verticalDistanceThreshold设置新值。

请注意，您需要将更改绑定到mobileinit事件，并且在加载jQuery js文件之后和加载jQuery-Mobile js之前，代码应放入<head>。

<script src="jquery.js"></script>

<script>
$(document).bind("mobileinit", function(){
 $.event.special.swipe.horizontalDistanceThreshold = '100'; // default 30px
 $.event.special.swipe.verticalDistanceThreshold = '150'; // default 75px
});
</script>

<script src="jquery-mobile.js"></script>

参考：Swipe event - jQuery Mobile

Answer 2

像这样调整滑动阈值

$.swipe.defaults.threshold.x = '30'; //for horizontal swiping sensitivity
$.swipe.defaults.threshold.y = '10'; //for vertical swiping sensitivity

只需添加这些代码即可更改应用程序滑动的全局敏感度，并在输入上述代码后执行常用代码

直接更改某个元素的敏感度，你可以做这样的事情

$('[data-role="page"]').swipe({ threshold: {x: 30, y: 20},
swipeLeft: function() { alert('swiped left') },
swipeRight: function() { alert('swiped right') }});

滑动效果敏感度

2 个答案: