zoukankan      html  css  js  c++  java
  • 完美解决 Phonegap jQeuryMobile 闪屏 问题

    在切换page或者弹出dialog时,会出现闪屏情况,综合网络上各种方法,得出以下方法可完美解决:

    1、首先界面页面切换闪屏:

    在加载jQuery后,加载jQuery Mobiel之前,插入js语句进行修复:
    <script src="js/jquery-1.9.1.min.js"></script>
      <script type="text/javascript"> 
      
    $(document).bind("mobileinit", function()  
    {  
       if (navigator.userAgent.indexOf("Android") != -1)  
       {  
     $.mobile.defaultPageTransition = 'none';  
     $.mobile.defaultDialogTransition = 'none';  
       }  
    }); 
    </script>
    <script src="js/jquery.mobile-1.3.2.min.js"></script>

    2、修复弹出对话框闪屏
      从弹出的对话框返回页面时,底部设置了fixed 的footer 会闪,解决方法为在该页面添加以下css(不影响页面外观):
        <style type="text/css">
      .ui-mobile, .ui-mobile .ui-page, .ui-mobile [data-role="page"], 
    .ui-mobile [data-role="dialog"], .ui-page, .ui-mobile .ui-page-active { 
    overflow: hidden; 
    -webkit-backface-visibility: hidden; 

    .ui-header { 
    position: fixed; 
    z-index:10; 
    top:0; 
    100%; 
    padding:0 0; 


    .ui-content { 
    padding-top: 57px; 
    padding-bottom: 54px; 
    overflow: auto; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 

    .ui-footer { 
    position: fixed; 
    z-index:10; 
    bottom:0; 
    100%; 


      </style>

    3、补充,html头部信息meta修改如下:

    < meta name="viewport" content="width=device-width, user-scalable=no" />


    各位如有更好的方法,请留言分享、讨论。

  • 相关阅读:
    Spring简介和基础
    el表达式
    Spring MVC 文件上传下载
    el表达式的function标签
    JSTL核心标签库使用
    基于注解的SpringMVC
    new一个Object对象占用多少内存?
    leetcode-第k个排列(Java和c++版)
    使用maven构建web项目(简易版)
    leetcode-电话号码的字母组合
  • 原文地址:https://www.cnblogs.com/zuike/p/3334450.html
Copyright © 2011-2022 走看看