在jQuery和Phonegap中滑动工作意外

我正在使用此答案中给出的代码在我的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>

on 的那个版本等效于绑定。要替换直播，您需要

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

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

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

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

我不知道

回答我自己的问题是否具有良好的礼节，但我找到了解决方案，我认为可见会很方便。

我更新到 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 就在这里

相关内容

最新更新

热门标签：