页面中使用了zepto的swipeLeft和swipeRight方法，上下滑动的时候也会误触发左右滑动事件

Question

要实现的效果：
右滑动切换到评价页面
左滑动切换简介页面

// 切换
    $(document).swipeLeft(function(){
        $('.tab-title li').removeClass('on').eq(1).addClass('on');
        $('.tab-body .tab-con').removeClass('on').eq(1).addClass('on');
    })
    $(document).swipeRight(function(){
        $('.tab-title li').removeClass('on').eq(0).addClass('on');
        $('.tab-body .tab-con').removeClass('on').eq(0).addClass('on');
    })

使用了swipeLeft()和swipeRight()的两个方法，但是在实际操作中发现上下滑动的时候会偶尔触发左右滑动事件，请问要如何修改呢？

Answer 1

刚搜索找到的方法，通过判断滑动距离来执行事件，代码如下：

// 获取滑动距离
    var startPosition, endPosition, moveLength;  
        $(document).bind('touchstart', function(e){  
        var touch = e.touches[0];  
        startPosition = {  
            x: touch.pageX 
        }
    }) .bind('touchmove', function(e){  
        var touch = e.touches[0];  
        endPosition = {  
            x: touch.pageX
        };  
        moveLength = endPosition.x - startPosition.x;
    });
    // 切换
    $(document).swipeLeft(function(){
        if(Math.abs(moveLength)>80){
            $('.tab-title li').removeClass('on').eq(1).addClass('on');
            $('.tab-body .tab-con').removeClass('on').eq(1).addClass('on');
        }
    })
    $(document).swipeRight(function(){
        if(Math.abs(moveLength)>80){
            $('.tab-title li').removeClass('on').eq(0).addClass('on');
            $('.tab-body .tab-con').removeClass('on').eq(0).addClass('on');
        }
    })

Answer 2

楼主大大好人，感谢！