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() 之外，还可以使用swipeleft 和swiperight 在页面之间导航。这是一个简单的代码，根据您的需要进行调整。
$(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中如何通过滑动来滑动不同的页面？的主要内容，如果未能解决你的问题，请参考以下文章