jquery mobile上页面更改后swiper分页制动

Posted 2023-05-09

【中文标题】jquery mobile上页面更改后swiper分页制动

【英文标题】：swiper pagination brakes after page change on jquery mobile

【发布时间】：2014-08-26 12:39:21

【问题描述】：

我正在使用iDangerous Swiper 库与Jquery Mobile 框架一起显示移动滑动触摸图库。 它工作正常，除非我离开索引页面（画廊所在的位置）然后回来，分页小部件无法正常工作。它仍然出现（我可以看到项目符号），并且它仍然是可点击的，即如果我“触摸”一个项目符号，画廊会滑动到相应的幻灯片并且项目符号变为“活动”，但它不能以相反的方式工作，在换句话说，它不响应幻灯片更改：如果我在幻灯片中滑动，当前活动的项目符号不会更新。

这是初始化代码：

$( document ).on( "pageshow", "#index-page", function( event ) 

    var mySwiper = new Swiper('.swiper-container',
        pagination: '.pagination',
        paginationClickable: true,
        slidesPerView: 'auto'
    );

);

页面与 jquery mobile 的 data-ajax="true" 属性链接以保留全局范围。

【问题讨论】：

你应该只初始化一次。将.on() 替换为.one()。

或者使用pageinit事件，调用一次

解决了这个问题，同时在链接中明确声明了 data-ajax=true 属性，谢谢！

【参考方案1】：

它帮助我分页 swiper idangerous jquery mobile

$(document).one("pageshow", "#page1", function (e) 
        var swiper = new Swiper('.swiper-container', 
        paginationClickable: true,
        hashnav: true,
        pagination: '.swiper-pagination',
        hashnav: true );       
    function reinitSwiper(swiper) 
      setTimeout(function () 
       swiper.reInit();
      , 500);
    
);

【参考方案2】：

问题： 初始化 swiper 两次。

解决方案： 在“pageshow”事件之外定义一个全局变量“swiper”。第一次加载图库时，全局变量“swiper”将是“未定义的”。当您离开页面并返回时，全局变量“swiper”不会“未定义”。那就不要再初始化了。

<script>
    var swiper;

    $(document).on("pageshow", "#page1", function (e) 
        if (swiper == undefined) 
            swiper = new Swiper('.swiper-container', 
                pagination: '.pagination',
                paginationClickable: true,
                slidesPerView: 'auto'
            ); 
        
    );
</script>

【讨论】：

当你离开页面时，后面有值的 swiper 变量消失了，所以它将是undefined 并再次初始化。尝试使用本地存储以保留页面加载之间的值。