2

我正在开发一个 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 不再触发

有什么建议么？

4

1 回答 1

0

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

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

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

希望有帮助！！！

于 2014-05-10T08:53:56.100 回答