JQM中如何通过滑动来滑动不同的页面?

Posted

技术标签:

【中文标题】JQM中如何通过滑动来滑动不同的页面?【英文标题】:How to slide different pages in JQM by swiping? 【发布时间】:2013-12-20 23:05:48 【问题描述】:

我正在使用以下代码在我的 html 文件中寻找类似的东西

 <!-- Extra Codiqa features -->
  <link rel="stylesheet" href="codiqa.ext.css">

  <!-- jQuery and jQuery Mobile -->
  <script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
  <script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

  <!-- Extra Codiqa features -->
  <script src="https://d10ajoocuyu32n.cloudfront.net/codiqa.ext.js"></script>

</head>
<body>
<!-- Home Page-->
<div data-role="page" id="page1">
    <div data-theme="a" data-role="header">
        <h3>
            Header
        </h3>
    </div>
    <div data-role="content">
        <a data-role="button" href="#page2">
            page1
        </a>
    </div>
</div>


<!-- Second Page-->
<div data-role="page" id="page2">
    <div data-theme="a" data-role="header">
        <h3>
            Header2
        </h3>
    </div>
    <div data-role="content">
        <a data-role="button" href="#page1">
            page2
        </a>
    </div>
</div>
</body>
</html>

首先我可以看到page1,当我点击按钮时,它会移动到page2。

我想要这样,当我“向左滑动”时,我想看到第 2 页而不是单击按钮。

【问题讨论】:

【参考方案1】:

除了$.mobile.changePage() 之外,还可以使用swipeleftswiperight 在页面之间导航。这是一个简单的代码,根据您的需要进行调整。

$(document).on("pageinit", "#page1", function () 
    $(this).on("swipeleft", function () 
        $.mobile.changePage("#page2", 
            transition: "slide"
        );
    );
);

$(document).on("pageinit", "#page2", function () 
    $(this).on("swiperight", function () 
        $.mobile.changePage("#page1", 
            transition: "slide",
            reverse: true
        );
    );
);

Demo

【讨论】:

它是点击而不是滑动操作 用鼠标滑动或在手机上测试,不要使用按钮@user2990885 @user2990885 我会检查它,它应该可以工作,但您需要将它绑定到每个页面的pageinit @user2990885 检查更新的答案和演示,在 iPhone 上测试。

以上是关于JQM中如何通过滑动来滑动不同的页面?的主要内容,如果未能解决你的问题,请参考以下文章

App页面滑动

如何禁止Gridview上下滑动

如何通过单击放置在同一页面上的小部件来显示不同的小部件

如何防止在 SwipeView 中手动滑动页面

appium---App页面滑动

jQuery Mobile (JQM) 上一页