3

我正在使用此答案中给出的代码在我的 Phonegap 应用程序中滑动多个页面。

但是，似乎不推荐使用实时功能，此外，当我尝试重新加载时，页面下方会出现“0”。当我尝试更多时，会创建一串零，每个零的数量表示该页面的重新加载次数。长话短说：刷卡有效，但刷卡页面的每次加载都会出现 0。

我试图改成这个，但似乎不起作用（我使用的是 Phonegap 2.1.0、jQuery 1.8.2 和 jQuery Mobile 1.1.1）。

<script type="text/javascript">
    $('div.ui-page').on("swipeleft", function () {
        var nextpage = $(this).next('div[data-role="page"]');
        if (nextpage.length > 0) {
            $.mobile.changePage(nextpage, {
                transition: "slide",
                reverse: false
            }, true, true);
        }
    });
    $('div.ui-page').on("swiperight", function () {
        var prevpage = $(this).prev('div[data-role="page"]');
        if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {
                transition: "slide",
                reverse: true
            }, true, true);
        }
    });
</script>

编辑：我试过这个，与最初的问题一样：

<script type="text/javascript">
    $(document).delegate('div.ui-page', 'swipeleft', function () {
        var nextpage = $(this).nexy('div[data-role="page"]');
        if (nextpage.length > 0) {
            $.mobile.changePage(nextpage, {
                transition: "slide",
                reverse: false
            }, true, true);
        }
    });
    $(document).delegate('div.ui-page', 'swiperight', function () {
        var prevpage = $(this).prev('div[data-role="page"]');
        if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {
                transition: "slide",
                reverse: false
            }, true, true);
        }
    });
</script>
4

2 回答 2

1

该版本的 on 等效于 bind。要更换现场，您需要

$(document).on("swipeleft", "div.ui-page", function...

要进一步调试事件，请检查 $(this) 所指的内容 - 它可能不是您认为的页面，并且可能没有下一个/上一个元素。

这在一定程度上取决于您的应用程序的设置方式，但通常您不能依赖以任何特定顺序存在的页面 div。

此外，对 changePage 的调用似乎与当前文档（ http://jquerymobile.com/test/docs/api/methods.html）不匹配 - 最后两个正确的是什么？

于 2012-11-16T12:33:34.183 回答
1

我不知道回答我自己的问题是否符合良好的礼仪，但我找到了解决方案，我认为它会很方便可见。

我更新到 jQuery 1.8.2 和 jQuery mobile 1.2.0，一切正常。一个有效的例子在这里：

<!DOCTYPE HTML>
<html>
<head>
    <title>EventApp</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>  

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/css/jquery.mobile.structure-1.2.0.min.css" />

    <script type="text/javascript" charset="utf-8" src="js/core/cordova-2.1.0.js"></script>
    <script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script>
    <script type="text/javascript">
    $(document).ready( function() {
    $('div.ui-page').live("swipeleft", function () {
        var nextpage = $(this).next('div[data-role="page"]');
        if (nextpage.length > 0) {
            $.mobile.changePage(nextpage, {
                transition: "slide",
                reverse: false
            });
        }
    });
    $('div.ui-page').live("swiperight", function () {
        var prevpage = $(this).prev('div[data-role="page"]');
        if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {
                transition: "slide",
                reverse: true
            });
        }
    });
    });
    </script>
</head>
<body>
<div data-role="page">
    <div data-role="header">
        <h2 class="ui-title">Page one</h2>
    </div>
    <div data-role="content">
        You are in page one.
    </div>
    <div data-role="footer" data-id="foo1" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="index.html" data-icon="home">Home</a></li>
                <li><a href="b.html" data-icon="info">Info</a></li>
                <li><a href="#" data-icon="gear">Settings</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->
</div>
<div data-role="page">
    <div data-role="header">
        <h2 class="ui-title">Page two</h2>
    </div>
    <div data-role="content">
        You are in page two.
    </div>
    <div data-role="footer" data-id="foo1" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="index.html" data-icon="home">Home</a></li>
                <li><a href="b.html" data-icon="info">Info</a></li>
                <li><a href="#" data-icon="gear">Settings</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->
</div>
<div data-role="page">
    <div data-role="header">
        <h2 class="ui-title">Page three</h2>
    </div>
    <div data-role="content">
        You are in page three.
    </div>
    <div data-role="footer" data-id="foo1" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="index.html" data-icon="home">Home</a></li>
                <li><a href="b.html" data-icon="info">Info</a></li>
                <li><a href="#" data-icon="gear">Settings</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->
</div>
<div data-role="page">
    <div data-role="header">
        <h2 class="ui-title">The map</h2>
    </div>
    <div data-role="content">
        <div id="map_canvas"></div>
    </div>
    <div data-role="footer" data-id="foo1" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="index.html" data-icon="home">Home</a></li>
                <li><a href="b.html" data-icon="info">Info</a></li>
                <li><a href="#" data-icon="gear">Settings</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->
</div>
</body>

如果你想要JsFiddle 就在这里

于 2012-11-17T17:21:29.377 回答