Question

我正在使用jquery mobile创建一个phonegap应用程序，我有一个启动画面，五秒后，将滑动到swiper幻灯片，这里是代码：

的index.html

  <!--splash-->
  <div data-role="page" id="page_splash">
      <script type="text/javascript" charset="utf-8" src="scripts/splash.js"></script>
      <div class="center"><img src="images/sample_icon.png"></div>
  </div>
  <!--end of splash-->
  <!--swpier-->
  <div data-role="none" id="page_swiper" style="display:none">
      <link rel="stylesheet" href="css/Swiper-3.1.0/swiper.min.css">

      <div class="swiper-container" data-role="none">
          <div class="swiper-wrapper" data-role="none">
              <span class="swiper-slide">Slide 1</span>
              <span class="swiper-slide">Slide 2</span>
              <span class="swiper-slide">Slide 3</span>
              <span class="swiper-slide">Slide 4</span>
              <span class="swiper-slide">Slide 5</span>
              <span class="swiper-slide">Slide 6</span>
              <span class="swiper-slide">Slide 7</span>
              <span class="swiper-slide">Slide 8</span>
              <span class="swiper-slide">Slide 9</span>
              <span class="swiper-slide">Slide 10</span>
          </div>

          <div class="swiper-pagination"></div>

      </div>

      <script src="js/Swiper-3.1.0/swiper.min.js"></script>
      <script>
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true
        });

      </script>

  </div>
  <!--end of swpier-->

splash.js

$('#page_splash').live('pageshow',function(){
setTimeout(
  function()
  {
    //alert('test');
     //$('#page_swiper').show();
     $.mobile.changePage( $('#page_swiper'), { transition: "slide", reverse: true });

     //$('#page_swiper').hide();
     $('#page_swiper').show();
          $("#page_swiper").data("data-role", "none");
          $("#page_swiper").load();

     //do something special
  }, 5000);

})

不兼容意味着swiper没有显示相对于幻灯片数量的所有项目符号，请参阅图片

我发现，如果我将page_swiper的data-role设置为“page”，就会出现问题。但即使我将data-role（page_swiper）设置为none，如果代码 $ .mobile.changePage（$（'＃page_swiper'），{transition：“slide”，reverse：true}）; 一旦运行，page_swiper似乎它的数据角色将自动更改为“页面”，问题将再次发生，如何让swiper完美运行？

Answer 1

我添加了var swiper = new Swiper('.swiper-container', {

$(document).on('pageshow', '#page_swiper', function() {
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true
    });
}

解决了问题

jquerymobile css与swiper js不兼容

1 个答案: