2

私はjqueryモバイルWebアプリに取り組んでいます。私はdangero.us swiperを統合してみました。swiper-container に動的 html を入力します。他のタスクで説明されているように、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-content を <div class="swiper-wrapper">直接追加する必要があります。

現在は機能していますが、次のとおりです。

  • ページネーションが表示されなくなりました
  • onSlideClick が起動しなくなりました

助言がありますか？

4

1 に答える 1

0

次のように、スワイパーのjsファイルでcreatepaginationメソッドを呼び出して、reinit関数のページネーションを更新しようとしましたが、うまくいきました。

バージョン 2.1 の縮小された js ファイルの 741 行目に移動します。以下に示すように reinit メソッドがあります。スワイパーが動的に生成される場合は、このメソッドを呼び出してスワイパーを再初期化する必要があります。次のようにページネーションを更新するために、reinit で createPagination() メソッドを呼び出しました。デフォルトでは、reinit メソッドは init メソッドのみを呼び出すため、ページネーションは行われません。更新されません。

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

それが役立つことを願っています!!!

于 2014-05-10T08:53:56.100 に答える