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-instance调用reinit（） - 函数

$('#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-instance正常工作的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行。将有一个如下所示的重新启动方法。如果动态生成，则需要调用此方法重新初始化swip。我已在reinit中调用createPagination（）方法，以便按如下方式更新分页。默认情况下，reinit方法仅调用init方法，因此分页不会＃39; t得到更新。

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

希望有所帮助!!!

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

1 个答案: