html Jquery 移动页面滑动

Question

任何人都可以将我引向正确的方向，在网站上获得 3 个页面，并结合来自 JQuery 移动设备的滑动元素，对于 iPad 使用我已经成功地从第一页（介绍）滑动到下一页（概述）和返回..但无法从（概述页面）向左滑动进入网站的第三页（属性）...这是我的代码：

首页...

<script type="text/javascript">
$(function () {
        $("body").live('swiperight', function (event, ui) {
            $.mobile.changePage("introduction.html", "slide");
        });

        $("body").live('swipeleft', function (event, ui) {
            $.mobile.changePage("overview.html", "slide");
        });
    });
</script>

第二页...

<script type="text/javascript">
$(function () {
        $("body").live('swiperight', function (event, ui) {
            $.mobile.changePage("introduction.html", "slide");
        });

        $("body").live('swipeleft', function (event, ui) {
            $.mobile.changePage("properties.html", "slide");
        });
    });
</script>

Answer 1

当您使用 changePage 时，jQuery mobile 不会将您发送到新页面。它只会抓取新页面的部分（在您的情况下是正文）并加载到当前页面中。

所以在第一次滑动之后，第二个页面被加载，但所有参数仍然来自第一页。进一步滑动就像试图加载已经加载的第二个页面......没有进一步的操作。

你可以做什么，例如， 用唯一的 id 包装您的每个页面内容 <div id="firstpage">...</div> 在您的 javascript 中，将其更改为：

$("#firstpage").live('swiperight', function (event, ui) {
        $.mobile.changePage("introduction.html", "slide");
    });