SwipeJS在JQuery-Mobile Web應用程序中不起作用

Question

我嘗試在我的JQuery-Mobile網站上運行SwipeJS（www.swipejs.com）。

  <script src="bin/js/swipe.js"></script>      
   <style>  
      /* Swipe 2 required styles */  
      .swipe {
        overflow: hidden;
        visibility: hidden;
        position: relative;
      }
      .swipe-wrap {
        overflow: hidden;
        position: relative;
      }
      .swipe-wrap > div {
        float:left;
        width:100%;
        position: relative;
      } 
      /* END required styles */  
      </style>

-

<!-- PAGE -->
<div data-role="page" id="pagec" data-theme="a">
  <div data-role="header" data-id="head2" data-position="fixed" data-tap-toggle="false">
    <div data-role="navbar">
        <ul>
            <?php getNav(); ?>
        </ul>
    </div>
  </div>
<div data-role="content">
  <!-- SWIPE -->
  <div id='mySwipe' style='max-width:500px;margin:0 auto' class='swipe'>
  <div class='swipe-wrap'>
    <div><b>0</b></div>
    <div><b>1</b></div>
    <div><b>2</b></div>
    <div><b>3</b></div>
    <div><b>4</b></div>
    <div><b>5</b></div>
    <div><b>6</b></div>
    <div><b>7</b></div>
    <div><b>8</b></div>
    <div><b>9</b></div>
    <div><b>10</b></div>
    <div><b>11</b></div>
    <div><b>12</b></div>
    <div><b>13</b></div>
    <div><b>14</b></div>
    <div><b>15</b></div>
    <div><b>16</b></div>
    <div><b>17</b></div>
    <div><b>18</b></div>
    <div><b>19</b></div>
    <div><b>20</b></div>
  </div>
  </div>



  <div style='text-align:center;padding-top:20px;'>

    <button onclick='mySwipe.prev()'>prev</button> 
    <button onclick='mySwipe.next()'>next</button>

  </div>
  <?php getContent(); ?>  
  <!-- //SWIPE -->    
</div>
  <div data-role="footer" data-position="fixed" data-tap-toggle="false">
    <?php getForm(); ?>
  </div>
</div>
<!-- //PAGE -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='swipe.js'></script>
<script>

// pure JS
var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, {
  // startSlide: 4,
  // auto: 3000,
  // continuous: true,
  // disableScroll: true,
  // stopPropagation: true,
  // callback: function(index, element) {},
  // transitionEnd: function(index, element) {}
});

// with jQuery
// window.mySwipe = $('#mySwipe').Swipe().data('Swipe');

</script>

swipe.js鏈接在隨附的header.php中，並且還添加了所需的CSS。 盡管一切都按照說明進行了實現，但它不起作用。

該演示工作正常...

我究竟做錯了什么？

Answer 1

我把代碼放在頭上，然后TADAAAAA ...有效。

 $(document).on('pageshow', function () {
  var elem = document.getElementById('content_swipe');
  window.content_swipe = Swipe(elem, {
    // startSlide: 1,
    // auto: 3000,
    // continuous: true,
    // disableScroll: true,
    // stopPropagation: true,
    // callback: function(index, element) {},
    // transitionEnd: function(index, element) {}
  });
  // with jQuery
  // window.mySwipe = $('#mySwipe').Swipe().data('Swipe');
});

Answer 2

只是想補充一下，在新版本的JQM中，不推薦使用pageshow事件。 您可以使用一個新事件：

$(document).on('pagecontainershow', function (event, ui) {  
    window.mySwipe = Swipe(document.getElementById('content_swipe'));   
});