iOS 忽略 Swiper 库的容器宽度

Posted 2023-03-12

【中文标题】iOS 忽略 Swiper 库的容器宽度

【英文标题】：iOS ignores container width for Swiper gallery

【发布时间】：2016-11-28 10:16:01

【问题描述】：

我正在制作一个简化的滑动器图库，我只需要它来隐藏默认浏览器滚动条并滑动浏览图像。我正在为滑动逻辑使用 jQuery 和 TouchSwipe 插件。到目前为止，我已经编写了这段代码：https://jsfiddle.net/drbj6zk8/5/。我添加了容器（通过获取 (div.swipe - div.swipe-wrapper) 计算得出），并且刷卡器不应超出这些边界。

$(函数()

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