Phonegap + JQuery Мобильный медленный переход страницы

В настоящее время перестраивает приложение NimbleKit с помощью Phonegap + JQuery Mobile и работает в самых простых проблемах. Я использую многостраничный стиль дизайна и просто пытаюсь перейти к переходу между двумя страницами фиктивного контента с фиксированной вкладкой ниже. Тем не менее, когда я касаюсь любой вкладки, есть приличный лаг, прежде чем что-нибудь случится. Я чувствую, что я, вероятно, пропустил что-то действительно простое, мог ли кто-нибудь взглянуть на приведенный ниже код и сообщить мне, видят ли они что-нибудь, что я делаю неправильно?Phonegap + JQuery Мобильный медленный переход страницы

<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>

Спасибо!

Эллиот

источник

2013-11-22 Elliott Bowles

[jsFiddle] (http://www.jsfiddle.net) может быть хорошим. –

Обычно есть 300мс задержка, которая добавляется в ОС мобильного устройства, чтобы различать между краном и двойное нажатие. Подождите 300 мс, чтобы узнать, будет ли пользователь снова использовать для создания события двойного касания.

Вы можете использовать некоторый плагин, такой как fastClick, который удаляет эту задержку.

Также настройте настройки jQM.

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

hoverDelay - это тот, с которым вам следует обращаться с осторожностью. Это делает достойное улучшение. Но не злоупотребляйте этим, сделав это 0: P

источник

2013-11-23 19:24:42 Purus

Phonegap + JQuery Мобильный медленный переход страницы

ответ

Смежные вопросы