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

我尝试在我的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。尽管一切都按照说明进行了实现，但它不起作用。

该演示工作正常...

我究竟做错了什么？

最佳答案

我把代码放在头上，然后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');
});

关于javascript - SwipeJS在JQuery-Mobile Web应用程序中不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20887418/