2016-11-28 1 views
1

私は単純なスワイパーギャラリーを作っています。ここではデフォルトのブラウザースクロールを隠して画像をスワイプする必要があります。私はスワイプロジックのためにjQueryとTouchSwipeプラグインを使用しています。これまで私はこのコードを書いています:https://jsfiddle.net/drbj6zk8/5/。私が取得することにより算出したコンテナを(追加した(div.swipe - div.swipeラッパー)とswiperは、これらの境界の外に出てはならないiOSはスワイパーギャラリーのコンテナ幅を無視します

$(関数(){

var currentTranslation = 0; 
var lastDistance = 0; 
var translationDelta = 0; 
var containerLengthArr = $('div.swipe-slide'); 
var containerLength = 0; 
var containerBorder = 0; 

$("#test5").swipe({ 
    swipeStatus: swipe2, 
    allowPageScroll: "horizontal" 
}); 
/*TODO*/ 

$.each(containerLengthArr, function(e) { 
    containerLength += ($(this).width() + 10); 
}) 
$('.swipe-wrapper').width(containerLength + 5); 
containerBorder = $('.swipe').width() - $('.swipe-wrapper').width(); 
console.log(containerBorder); 

//Swipe handlers 

function swipe2(event, phase, direction, distance) { 
    var check = $(this).children('.swipe-slide'); 
    if (phase == "end") { 
     translationDelta = 0; 
    } else { 
     translationDelta = lastDistance - distance; 
    } 
    /*Check direction*/ 
    if (direction == "right") { 
     currentTranslation -= translationDelta; 
    } else if (direction == "left") { 
     currentTranslation += translationDelta; 
    } 
    var distance2 = 0; 
    /*Limit slider to wrapper lenghth*/ 
    if (currentTranslation > 0) { 
     distance2 = "translateX(" + 0 + "px)"; 
     currentTranslation = 0; 
    } 
    else if (currentTranslation < containerBorder) { 
     distance2 = "translateX(" + containerBorder + "px)"; 
     currentTranslation = containerBorder; 
    } 
    else { 
     distance2 = "translateX(" + currentTranslation + "px)"; 
    } 

    check.css('transform', distance2); 
    lastDistance = distance; 

    console.log(currentTranslation); 
} 

});

もちろん、すべてのデバイスはデスクトップブラウザとAndroidデバイスで正常に動作しますが、iOSデバイスの問題にぶつかっています。異なるデバイス(iphone 5、iphone 6、iPad)間の動作には一貫性がありません。それらのうち、私は違った、より重要なことに、壊れた行動を取っています(スライダーは同じではなく、もっと重要なのですか、スワイパー設定された境界を越えて行く)。

誰かが私が迷っていることを知っていますか、またはこれがiOSで動作するためのいくつかの特定の要件があるかどうかは誰ですか?

答えて

1

もう少し掘り下げて、jqueryプラグインのバグだと判明しました。 iOS上の距離を適切に「読み取る」ことはできません。提供される回避策は、バージョン1.6.9にダウングレードするか、プラグインを編集することでした。

参考:https://github.com/mattbryson/TouchSwipe-Jquery-Plugin/issues/260

関連する問題