在jquery移动端更改页面后，滑动分页停止

swiper pagination brakes after page change on jquery mobile

本文关键字：分页 移动 jquery      更新时间：2023-09-26

我正在使用dangerous 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"属性链接，以保持全局作用域。

它帮助我分页滑动危险的jquery移动

$(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);
    }
});

Issue:初始化两次扫描器

解决方案:定义一个全局变量"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>
相关文章：