zoukankan      html  css  js  c++  java
  • 手机APP开发mui注意事项

    固定栏靠前

    所谓的固定栏,也就是带有.mui-bar属性的节点,都是基于fixed定位的元素;常见组件包括:顶部导航栏(.mui-bar-nav)、底部工具条(.mui-bar-footer)、底部选项卡(.mui-bar-tab);这些元素使用时需遵循一个规则:放在.mui-content元素之前,即使是底部工具条和底部选项卡,也要放在.mui-content之前,否则固定栏会遮住部分主内容;

    一切内容都要包裹在mui-content中

    除了固定栏之外,其它内容都要包裹在.mui-content中,否则就有可能被固定栏遮罩,原因:固定栏基于Fixed定位,不受流式布局限制,普通内容依然会从top:0的位置开始布局,这样就会被固定栏遮罩,mui为了解决这个问题,定义了如下css代码:

        .mui-bar-nav ~ .mui-content {  
            padding-top: 44px;  
        }  
        .mui-bar-footer ~ .mui-content {  
            padding-bottom: 44px;  
        }  
        .mui-bar-tab ~ .mui-content {  
            padding-bottom: 50px;  
        }  
    

    你当然可以通过自定义CSS的方式实现如上类似效果,但为了使用简便,建议将除固定栏之外的所有内容,全部放在.mui-content中。

    始终为button按钮添加type属性

    若button按钮没有type属性,浏览器默认按照type=submit逻辑处理,这样若将没有type的button放在form表单中,点击按钮就会执行form表单提交,页面就会刷新,用户体验极差。

    窗口管理

    页面初始化:必须执行mui.init方法

    mui在页面初始化时,初始化了很多参数配置,比如:按键监听、手势监听等,因此mui页面都必须调用一次mui.init()方法;

    页面跳转:抛弃href跳转

    当浏览器加载一个新页面时,若页面DOM尚未渲染完毕,页面会先显示空白,然后等DOM渲染完毕后,再显示具体内容,这是WEB浏览器技术无法逾越的体验障碍;为解决这个问题,建议使用mui.openWindow方法打开一个新的webview,mui会自动监听新页面的loaded事件,若加载完毕,再自动显示新页面;

    页面关闭:勿重复监听backbutton

    mui框架自动封装了页面关闭逻辑,若希望自定义返回逻辑(例如编辑页面的返回,需用户确认放弃草稿后再执行返回逻辑),则需要重写mui.back方法,切勿简单通过addEventListener添加backbutton监听,因为addEventListener只会增加新的执行程序,mui默认封装的监听执行逻辑依然会继续执行,因此若仅addEventListener添加用户确认框,则用户即使选择了取消,也会继续关闭窗口。

  • 相关阅读:
    mysql 数值函数
    java服务器简单实现
    利用monkeyrunner实现Android屏幕连续截图
    (Access denied for user 'root'@'localhost' (using password: NO))
    Java 基础之 static 静态
    天坑 之 Eclipse J2EE Preview 运行正确项目一直显示http 404
    Java web 实现 之 Filter分析ip统计网站的访问次数
    JSP 实现 之 读取数据库显示图片
    【转】焦虑、渴望中挣扎的我们,如何定义成功和失败?
    【转】美团点评技术团队金融核心交易系统可用性7个9是这样炼成的
  • 原文地址:https://www.cnblogs.com/dsmf/p/6886457.html
Copyright © 2011-2022 走看看