Question

我正在寻找像我的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>

首先我可以看到第1页，当我点击按钮时，它将移至第2页。

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

Answer 1

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

$(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

如何通过滑动在JQM中滑动不同的页面？

1 个答案: