cordova - 如何在 jquery mobile 中为 phonegap 应用程序加速 changepage

Question

我将 jquerymobile 1.3.1 用于我的 phonegap android 应用程序。在没有页面转换（defaultPageTransition=none）的android中，更改页面方法很慢（超过1秒）。

touchstart 和 tap 事件在下一页表单元素上触发..

任何想法？

Answer 1

有几种方法：

• 如果您使用 1 个包含多个页面的 html 文件，请将它们包装到单个 div 中：

  <div id="container"/>
  

  并设置这个CSS：

  body {
      margin: 0;
  }
  
  #container {
      position: absolute;
      width: 100%;
      height: 100%;
  }
  

  js代码：

  $(document).one("mobileinit", function () {
      $.mobile.pageContainer = $('#container');
      $.mobile.defaultPageTransition = 'slide';
  });
  

  可以在此处找到有关此方法的更多信息：http: //outof.me/fixing-flickers-jumps-of-jquery-mobile-transitions-in-phonegap-apps/

• 其他常见的解决方案是设置这个 css： .ui-page { -webkit-backface-visibility: hidden; }

该解决方案的问题在于它破坏了表单上的选择列表。

• 关闭它们：

  $(document).bind("mobileinit", function(){
      $.mobile.defaultDialogTransition = "none";
      $.mobile.defaultPageTransition = "none";
  });
  

• 在 jquery 移动应用程序上使用 fastclick 来加速点击事件，从而加快页面转换。点击事件最多可以添加 300 毫秒到页面转换。这个插件会做更多的事情，但在你的情况下就足够了。

链接：https ://github.com/drowne/jquery.mobile.fastclick

• 如果您不想要其他插件，您仍然可以通过从页面更改按钮中删除 href 然后执行以下操作来实现更快的页面转换：

  <a class="ui-btn-left" data-icon="arrow-l" href="#" data-theme="a" id="back-btn">Back</a>
  
  $('#back-btn').bind('touchstart', function(e) {
      $.mobile.changePage("#pageID");
  });
  

  如果您知道用户不会滚动，则 touchstart（或 touchend）事件非常有用。这实际上是点击事件在移动设备上需要很长时间才能解决的原因，设备正在等待查看用户是否在滚动或点击。所以 touchstart 不应该像常见的点击/点击事件那样有延迟。

  我希望其中一些解决方案对您有所帮助。考虑到，这些不是万无一失的解决方案，它们也有自己的缺点。

Answer 2

我建议

Energize.js - https://github.com/davidcalhoun/energy.js消除了所有点击/点击的点击延迟

只需更改 Jquery Mobiles 的 CSS

.in, .out {
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 350ms !important;
}