jquerymobile css 与 swiper js 不兼容答案

【问题标题】：jquerymobile css not compatible with swiper jsjquerymobile css 与 swiper js 不兼容
【发布时间】：2015-08-07 05:46:29
【问题描述】：

我正在使用 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);

})

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

我发现如果我将 page_swiper 的数据角色设置为“页面”，就会出现问题。但即使我将数据角色（page_swiper）设置为无，如果代码 $.mobile.changePage( $('#page_swiper'), { transition: "slide", reverse: true }); 一旦运行，page_swiper 似乎它的 data-role 会自动更改为“page”，并且问题会再次出现，我怎样才能让 swiper 完美地工作？

【问题讨论】：

标签： jquery jquery-mobile

【解决方案1】：

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

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

解决了问题

【讨论】：