Блог

Я использую опасную библиотеку Swiper для отображения галереи мобильных касаний в сочетании с фреймворком Jquery Mobile. Это работает нормально, за исключением того, что если я покину страницу индекса (где находится галерея), а затем вернусь, виджет разбивки на страницы не будет работать должным образом. Оно все еще появляется (я вижу маркеры), и оно по-прежнему доступно для просмотра, т. Е. Если я «касаюсь» маркера, галерея переходит к соответствующему слайду, и маркер становится «активным», но это не работает обратным образом, другими словами, оно не реагирует на изменения слайдов: если я пролистываю слайды, текущий активный маркер не обновляется.

это код инициализации:

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

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

});
  

Страницы связаны с помощью атрибута data-ajax =»true» jquery mobile для сохранения глобальной области видимости.

Это помогает мне разбиение на страницы в swiper для 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);
    }
});
  

Проблема: дважды инициализирую swiper.

Решение: Определите глобальную переменную «swiper» вне события «pageshow». Глобальная переменная «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>