簡體   English   中英

Phonegap + Jquery移動慢頁面過渡

[英]Phonegap + Jquery Mobile Slow Page Transition

當前正在使用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>

謝謝!

埃利奧特

通常,移動設備操作系統會添加300ms的延遲,以區分抽頭和雙擊。 它等待300毫秒,以查找用戶是否再次點擊以生成雙擊事件。

您可以使用一些類似fastClick的插件來消除此延遲。

同時調整jQM設置。

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

hoverDelay是您應該謹慎處理的。 它取得了不錯的進步。 但是不要通過將其設為0:P來過度使用它

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM