jquery mobile with dangerouso.us swiper 动态内容问题

Question

我正在开发一个 jquery 移动网络应用程序。我尝试过集成dangero.us swiper。 我用动态 html 填充我的 swiper 容器。我尝试在插入 html 后使用 reinit() 函数，如其他任务中所述，但没有任何反应。

这是我的html：

  <div data-role="page" id="slider">
     .....
     <div class="swiper-container">

        <div class="swiper-wrapper">  <!-- wrapper -->


             <div id="slidecontent"></div>  <!-- dyn. html here -->


        </div>  <!-- wrapper -->

 </div>  

这是我用于填充动态内容的代码，初始化 swiper-instance 并调用 reinit()-function

$('#slider').on('pageinit', function(event) {

  $('#slidecontent').load('slider_input.html').trigger("create");

  // div containers loading

});


   $(document).on('pageshow', '#slider', function(){ 

 var myapp2goSwiper = $('.swiper-container').swiper({
     pagination: '.pagination',
     paginationClickable: true,
     slidesPerView: 1,
     loop: true,
      onSlideClick : function(swiper) {
      //Do something when you touch the slide

      var i = myapp2goSwiper.clickedSlideIndex;

      var a = myapp2goSwiper.activeSlide();

      console.log(i);

      console.log(a);

      }


 }); 

 //myapp2goSwiper.reInit();
 reinitSwiper(myapp2goSwiper);

});


function reinitSwiper(swiper) {
setTimeout(function () {
    swiper.reInit();
}, 500);

};     

我的浏览器中没有显示任何内容。我可以做些什么来刷新或重新初始化我的 swiper 实例正常工作的 html 内容？现场演示在http://www.m.myapp2go.de/myapp2go-slide.html

我解决了我的问题。 将我的 html 内容附加到 <div id="slidecontent"></div> 是错误的。我必须将 html-content 直接附加到<div class="swiper-wrapper">。

现在可以了，但是：

• 不再显示分页
• onSlideClick 不再触发

有什么建议吗？

Answer 1

我尝试调用swiper的js文件中的createpagination方法来更新reinit函数中的分页，如下所示，成功了。

转到 2.1 版缩小的 js 文件中的第 741 行。将有一个 reinit 方法，如下所示。需要调用这个方法来重新初始化swiper，以防动态生成。我在reinit中调用了createPagination()方法来更新分页，如下所示。reinit方法默认只调用init方法，所以分页不会'没有得到更新。

a.reInit = function(b) {
   a.init(!0, b);
   a.createPagination();
};

希望对你有帮助！！！