移动端,做滑动效果需要有触摸误差范围

// nav宽度太小的时候,控制nav可以左右滑动查看地址
$('.touch-move').bind('touchstart', function (event) {
// 控制只有iPhone5才需要左右滚动,其他手机的屏幕够宽了
if (parseInt($(this).css('width'), 10) > 320) {
return;
}

    nav_is_moving = true;
    start_position = {
        offsetX: $(this).offset().left,
        x: event.changedTouches[0].clientX
    }
})
$('.prompt-select-fixed').bind('touchmove', function (event) {
    event.preventDefault();
    if (!nav_is_moving) {
        return;
    }
    // 计算拉动的距离
    var offset = event.changedTouches[0].clientX - start_position.x + start_position.offsetX;

    $('.touch-move').css({
        '-webkit-transform': 'translateX(' + offset + 'px)',
        'transform': 'translateX(' + offset + 'px)'
    })
})
$('.prompt-select-fixed').bind('touchend', function (event) {
    if (!nav_is_moving) {
        return;
    }
    var fixedOffset;
    nav_is_moving = false;
    
    // 用于判断滑动方向
    var offset = event.changedTouches[0].clientX - start_position.x;
    
    // 当未选择区县时,长度不会超出;且向右滑时,滚回0的位置
    if (!$('#district').val() || offset >= 5) {
        $('.touch-move').css({
            '-webkit-transform': 'translateX(' + 0 + 'px)',
            'transform': 'translateX(' + 0 + 'px)'
        })
    } 

    // 当右边距离"确定"太远 的情况下;且向左滑时,回滚到"确定"左边... -5是用于触摸的误差尺寸范围
    else if($('#district').val() && offset < -5){
        fixedOffset = parseInt($('.prompt-select-back').css('width'), 10);
        $('.touch-move').css({
            '-webkit-transform': 'translateX(-' + fixedOffset + 'px)',
            'transform': 'translateX(-' + fixedOffset + 'px)'
        })
    }
})

posted on 2017-12-28 20:12  xfh0192  阅读(114)  评论(0编辑  收藏  举报

导航