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

时间:2014-07-05 13:04:20

标签: javascript jquery html jquery-mobile swiper

我正在使用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”属性相关联,以保留全局范围。

2 个答案:

答案 0 :(得分:0)

它帮助我分页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);
    }
});

答案 1 :(得分:0)

问题: 初始化 swiper 两次。

解决方案: 在“pageshow”事件之外定义一个全局变量“swiper”。第一次加载图库时,全局变量“swiper”将是“undefined”。当您离开页面并返回时,全局变量“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>