MUI框架 页面dom规则

最接近原生APP体验的高性能前端框架,关于如何使用MUI框架来布局,你需要遵循如下规则

0 HTML5 APP开发MUI框架教程——创建移动APP

工具/原料

HBuilder

Mui v3.1.0

方法/步骤

【固定栏靠前】

所谓的固定栏,也就是带有.mui-bar属性的节点,都是基于fixed定位的元素:常见组件包括:顶部导航栏(.mui-bar-nav)、底部工具条(.mui-bar-footer)、底部选项卡(.mui-bar-tav);

MUI框架 页面dom规则

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

除了固定栏之外,其他的内容都要包裹在.mui-content之中,否则就有可能被固定栏遮住,

原因:固定栏基于fixed定位,不受流失布局限制,普通内容依然会从top:0px的位置开始布局,这样就会被固定栏遮住,mui-content内容部分,mui为解决这个问题,直接给mui-content定义了如下css代码;当然你也可以自己通过css代码进行定义实现效果,为了减少我们的代码量,使用起来简单,建议将除了固定栏之外的所有内容都放入mui-content之中

MUI框架 页面dom规则

【始终为button按钮添加type属性】

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

【页面跳转:抛弃href跳转】

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

MUI框架 页面dom规则

【点击:忘记click】

快速响应是mobile App实现的重中之重,研究表明,当延迟超过100毫秒,用户就能感受到界面的卡顿,然而手机浏览器的click点击存在300毫秒延迟(至于为何会延迟,及300毫秒的来龙去脉,请自行谷百),mui为了解决这个问题,封装了tap事件,因此在任何点击的时候,请忘记click及onclick操作

MUI框架 页面dom规则

相关文章

  1. mui开发之init组件

    mui JS是用来开发移动APP项目的利器,是一个轻量级的JS框架.那么,应该如何去掌握mui JS框架呢.最好一种方式,就是逐个熟悉mui框架的各个组件. 首先,我们先来学习init组件,负责页面的初始化工作. 工具/原料 HBuilder6.6 MUI2.5 方法/步骤 用init组件创建子页面 ...

  2. mui开发之event组件

    MUI框架常用的组件,除了init组件外,还有event组件(当然,不仅仅只有这些).那么,对于event组件,我们又应该如何去掌握呢. 下面将详细介绍event组件的常用用法. 工具/原料 HBuilder6.6 MUI2.5 方法/步骤 首先,我们得了解MUI框架都支持多少种事件类型.因为只有知 ...

  3. mui开发之dialog组件

    之前已介绍了mui框架的init组件.event组件,那么,接下来,我们来看看如何使用dialog组件.这也是常见的mui框架组件之一. 下面将详细介绍dialog组件的常用用法. 工具/原料 HBuilder6.6 MUI2.5 方法/步骤 首先,我们新建一个移动APP项目.然后,分别添加4个页面 ...

  4. HTML5 APP开发MUI框架教程--创建移动APP

    HTML5开发App掌握成本低,款平台发布,节省开发成本,MUI最接近原生APP体验的高性能前端框架, 方法/步骤 打开Hbuilder IDE编辑器 Hbuilder 初始化界面,可以看到"新建Web项目"."新建移动APP项目" 1. 直接点击新建移动AP ...

  5. Web 2.0应用客户端性能问题十大根源

    Web 2.0应用的推广为用户带来了全新的体验,同时也让开发人员更加关注客户端性能问题.最近,资深Web性能诊断专家.知名工具dynatrace的创始人之一Andreas Grabner根据自己的工作经验,总结了Web 2.0应用客户端性能问题十大根源,InfoQ中文站将这十个问题做了概括整理,供W ...

  6. NSIS客户端打包工具脚本编写案例

    对于目前游戏客户端打包来说安装文件越来越大,安装速度也越来越慢.由于前面提到的微软系统对于打包文件大小的限制问题,做过一些简单的说明和讲解,但是为了方便大家能够好理解.所以就做了以下NSIS示例出来.希望给那些要用NSIS工具进行打包客户端的朋友一些提示. 方法/步骤 示例: ; 该脚本使用 HM ...

  7. 如何成为一名高级的前端工程师

    方法/步骤 入门篇: 学习简单的布局,入门 HTML css 和 js,做前端的就不必说了,html css 和 js 就像是 画家手中的画笔和颜料,只有对他们足够掌握,才能用他们来创造出精美的页面.在这里推荐一个权威的入门网站!w3c在这里你能学到所有基础知识! 入门要求: 1. 能掌握 HTML ...

  8. Java新手学习步骤

    很多开始学习Java人都会卡在Java入门,其实网上也有很多问题和这种各样的答案!但我想说的是,只有苦逼坚持,你才能过得了这个门槛! 方法/步骤 首先要做好学习前的准备工作:java语言一般用于大型的服务器程序开发,所有有必要了解如下内容:Unix开发环境Unix系统原理.Unix开发环境.Unix ...

  9. 学习java的步骤和心得体会

    我做开发也是刚满一年,现在回想自己学习java的经历,当时真希望有一部大体的学习框架,这样自己就不会走许多弯路了,这是我在这一年工作和多年学习中的经验,希望对迷茫的java爱好者有所帮助: 第一步:首先要做好学习前的准备工作:java语言一般用于大型的服务器程序开发,所有有必要了解如下内容:Unix ...