Phonegap + Jquery移动慢页面过渡

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

通常，移动设备操作系统会添加300ms的延迟，以区分抽头和双击。 它等待300毫秒，以查找用户是否再次点击以生成双击事件。

您可以使用一些类似fastClick的插件来消除此延迟。

同时调整jQM设置。

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

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

Phonegap + Jquery移动慢页面过渡

问题描述

1 个解决方案

解决方案1
1 2013-11-23 19:24:42

Phonegap + Jquery移动慢页面过渡

问题描述

1 个解决方案

解决方案1 1 2013-11-23 19:24:42

解决方案1
1 2013-11-23 19:24:42