Question

目前正在使用Phonegap + Jquery Mobile重建NimbleKit应用程序并遇到最基本的问题。我正在使用多页面设计风格，我只是试图在两页虚拟内容之间进行转换，下面有一个固定的标签栏。但是，当我触摸任何一个标签时，在发生任何事情之前会有一个不错我觉得我可能错过了一些非常简单的东西，任何人都可以看看下面的代码并让我知道他们是否看到了我做错了什么？

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.0-rc.1.css" />

<title>Demo</title>
    </head>
    <body>
        <script type="text/javascript" src="phonegap.js"></script>
        <script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.4.0-rc.1.js"></script>

        <div data-role="page" id="one">

            <div data-role="header">
                <h1>Multi-page</h1>
            </div><!-- /header -->

            <div data-role="content" >
                <h2>One</h2>

                <p>This is page one</p>


            </div><!-- /content -->

            <div data-role="footer" data-position="fixed">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#one" data-transition="none">One</a></li>
                        <li><a href="#two" data-transition="none">Two</a></li>
                    </ul>
                </div><!-- /navbar -->
            </div><!-- /footer -->
        </div><!-- /page one -->


        <!-- Start of second page: #two -->
        <div data-role="page" id="two">

            <div data-role="header">
                <h1>Two</h1>
            </div><!-- /header -->

            <div data-role="content" data-theme="a">
                <h2>Two</h2>
                <p>Page 2</p>
            </div><!-- /content -->

            <div data-role="footer" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li><a href="#one" data-transition="none">One</a></li>
                    <li><a href="#two" data-transition="none">Two</a></li>
                </ul>
            </div><!-- /navbar -->
        </div><!-- /footer -->        </div><!-- /page two -->




    </body>

谢谢！

埃利奥特

Answer 1

通常，移动设备OS会添加300ms的延迟，以区分轻敲和双击。等待300毫秒，以查找用户是否再次点击以生成双击事件。

你可以使用像fastClick这样的插件来消除这种延迟。

同时调整jQM设置。

$(document).bind("mobileinit", function() {
    $.mobile.allowCrossDomainPages = true;
    $.support.cors = true;
    $.mobile.buttonMarkup.hoverDelay = 50;
});

hoverDelay是您应该谨慎处理的。它取得了不错的进步。但不要过度使用它：0：P

Phonegap + Jquery Mobile慢速页面转换

1 个答案: