Question

我正在尝试将Swiper JS添加到jquery移动应用中。问题是以下代码工作

 $(document).ready(function(){

var spv = 3;
//if ($(window).width()<1000) spv=1;
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        slidesPerView: spv,
        paginationClickable: true,
        spaceBetween: 30
    });

    swiper.update();
    } );

但是对于jquery移动函数来说$(document).ready(function(){是不对的......所以当我用$(document).on("pagecreate",function( event ) {替换它时，滑块停止工作..

我在这里设置了一个小提琴http://jsfiddle.net/livewirerules/37zp46m8/2/

任何帮助将不胜感激

Answer 1

这是因为display: none的页面容器还没有计算出的大小。所以，我将在这里为您提出一个解决这个经典问题的变体解决方案：只需设置简短的显示块并尽快重置它。

$(document).on("pagecreate", "#page-two", function() {
  $(this).toggleClass("size-hidden",true);
  var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    slidesPerView: 1,
    paginationClickable: true,
    spaceBetween: 30
  });
  $(this).toggleClass("size-hidden",false);
});

.size-hidden{
  display:block !important;
  visibility: hidden !important;
}

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

/* just to hide this boring scrollbar in code snippet */
html,body {
  overflow: hidden;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.7/css/swiper.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.7/js/swiper.jquery.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
  <div data-role="page" id="page-one">
    <div data-theme="a" data-role="header" data-position="fixed">
      <h3>First Page</h3>
      <a href="#page-two" class="ui-btn-right">Next</a>
    </div>
    <div data-role="content">
      <a href="#page-two" data-transition="flip" class="ui-btn ui-corner-all ui-mini">GOTO Swiper</a>
    </div>
    <div data-theme="a" data-role="footer" data-position="fixed">
      <h3>Footer</h3>
    </div>
  </div>
  <div data-role="page" id="page-two">
    <div data-theme="a" data-role="header" data-position="fixed">
      <h3>Second Page</h3>
      <a href="#" data-direction="reverse" data-rel="back" class="ui-btn-left">Back</a>
    </div>
    <div data-role="content">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="investment_list">
              <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%9780&w=300&h=80" />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="investment_list">
              <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%9780&w=300&h=80" />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="investment_list">
              <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%9780&w=300&h=80" />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="investment_list">
              <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%9780&w=300&h=80" />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="investment_list">
              <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%9780&w=300&h=80" />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="investment_list">
              <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%9780&w=300&h=80" />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="investment_list">
              <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%9780&w=300&h=80" />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="investment_list">
              <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%9780&w=300&h=80" />
            </div>
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <div data-theme="a" data-role="footer" data-position="fixed">
      <h3>Footer</h3>
    </div>
  </div>
</body>
</html>

Swiper JS没有在jquery mobile pagecreate

1 个答案: