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

【问题标题】：swiper pagination brakes after page change on jquery mobilejquery mobile上页面更改后swiper分页制动
【发布时间】：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 属性，谢谢！

标签： javascript jquery html jquery-mobile swiper

【解决方案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 并再次初始化。尝试使用本地存储以保留页面加载之间的值。