jquery mobile与dangero.us swiper动态内容问题

Question

我正在开发 jquery 移动网络应用程序。我尝试过集成dangero.us swiper。我用动态 html 填充我的 swiper-container。我尝试在插入 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 实例并调用 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 内容附加到 <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();
};

希望有帮助!!!