Question

更新（原始问题在此部分下方）

我有像这样集成的Swiper插件：

<!DOCTYPE html>
<html lang="en">
   <head>
        <!--This contains all scripts including the Swiper plugin-->

        <link href="css/jquery.mobile-1.4.5.css" rel="stylesheet" />
        <script src="js/ie-emulation-modes-warning.js"></script>
        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/ie10-viewport-bug-workaround.js"></script>
        <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>   
        <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script src="js/jquery.ui.touch-punch.min.js"></script>
        <link rel="stylesheet" href="css/swiper.css">

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.jquery.js"></script>
   </head>
   <body>

<div class="swiper-container">
<div class="swiper-wrapper">

    <div class="swiper-slide" data-hash="pagea">
        <div data-role="page" id="pagea">
           <!--Page A content in here-->
        </div>
    </div>

    <div class="swiper-slide" data-hash="pageb">
        <div data-role="page" id="pageb">
           <!--Page B content in here-->
        </div>
    </div>

    <div class="swiper-slide" data-hash="pagec">
        <div data-role="page" id="pagec">
           <!--Page C content in here-->
        </div>
    </div>

    <div class="swiper-slide" data-hash="paged">
        <div data-role="page" id="paged">
           <!--Page D content in here-->
           <!--Page D contains a button to make Page E slide down into view-->
        </div>
    </div>

</div>
</div>
<!--Horizontal Swiping between the 4 main pages ends here-->

<!--The Page to slide down & up vertically here-->

<div class="swiper-container-vertical">
<div class="swiper-wrapper">

    <div class="swiper-slide" data-hash="pagee">
        <div data-role="page" id="pagee">
           <!--Page E content in here-->
           <!--Page E contains a button to make it slide up out of view again-->
        </div>
    </div>

</div>
</div>


         <script>
          <!-- Initialize Swiper -->
          $( window ).on( "load", function() { 
          window.swiper = new Swiper('.swiper-container', {
              hashnav: true,
              hashnavWatchState: true,
              direction: 'horizontal',
          });

          <!-- Initialize Vertical Swiper -->
          $( window ).on( "load", function() { 
          window.swiper = new Swiper('.swiper-container-vertical', {
              hashnav: true,
              hashnavWatchState: true,
              direction: 'vertical',
          });
          </script>
       </body>
    </html>

页面A，B，C和D正确地水平滑动。但是，在上面的示例中，我为垂直滑动创建了另一个Swiper实例，我希望能够在单击按钮时在页面A上垂直滑动页面E。但我似乎无法让它发挥作用。

此代码是正常的jquery垂直/向下滑动过渡： $.mobile.changePage("#pagee", { transition: "slidedown", reverse: false }, true, true);它在我整合Swiper插件之前完美运行，但现在它什么也没做。 Swiper插件似乎将具有属性data-role="page"的任何页面转换为黑/空白页面。

上面的jquery移动垂直过渡是我正在寻找的，但是jquery mobile的水平滑动动作没有Swiper所做的那么好的响应。

有没有办法以某种方式合并两者，以便页面A，B，C和D使用Swiper水平滑动，并且页面E可以被触发在页面A上垂直向下滑动？（也许页面A需要同时具有swiper-container和swiper-container-vertical类才能处理页面B的水平滑动和页面E的垂直下拉？但我不知道如何这样做。）

或者，Swiper插件中是否有一种方法可以处理水平滑动页面上的垂直过渡？

原始问题：

我正在开发一个HTML Cordova应用程序，我正在使用Swiper插件：http://idangero.us/swiper在我的应用程序的4个主要页面之间水平滑动（这很好用，我喜欢插件的响应性）

但是我还想触发第5页从视口顶部垂直滑动，点击按钮（位于其中一个主页面上），然后第5页垂直向上滑动，方式与进入的方式相同点击另一个按钮。（基本上就像下拉菜单/页面一样）

我一直试图通过将Swiper插件与jquery的移动页面转换混合来实现这一点，但这两者似乎并不兼容，因为每当我将data-role=page值添加到相关页面时，当Swiper插件启动时，它显示为空白/黑色空间。

有可能做这样的事吗？如果没有，有没有人知道任何可以做到这一点的插件或方法？

在页面中水平滑动，单击按钮可以进行垂直页面转换

0 个答案: