其他分享
首页 > 其他分享> > MUI初识

MUI初识

作者:互联网

开发工具

HBuilder,官方下载,新建两个项目:

  1. Hello mui前端框架及各种UI控件;
  2. mui项目,包含基本的js、css,index.html中已引入mui

官方文档

https://dev.dcloud.net.cn/mui/ui/

使用注意事项

DOM结构

  1. 固定栏靠前
    所谓的固定栏,也就是带有.mui-bar属性的节点,都是基于fixed定位的元素;常见组件包括:顶部导航栏(.mui-bar-nav)、底部工具条(.mui-bar-footer)、底部选项卡(.mui-bar-tab);这些元素使用时需遵循一个规则:放在.mui-content元素之前,即使是底部工具条和底部选项卡,也要放在.mui-content之前,否则固定栏会遮住部分主内容;
  2. 一切内容都要包裹在mui-content中
    除了固定栏之外,其它内容都要包裹在.mui-content中,否则就有可能被固定栏遮罩,原因:固定栏基于Fixed定位,不受流式布局限制,普通内容依然会从top:0的位置开始布局,这样就会被固定栏遮罩,mui为了解决这个问题,定义了如下css代码;
  3. 始终为button按钮添加type属性
    若button按钮没有type属性,浏览器默认按照type=submit逻辑处理,这样若将没有type的button放在form表单中,点击按钮就会执行form表单提交,页面就会刷新,用户体验极差。

窗口管理

  1. 页面初始化
    必须执行mui.init方法,mui在页面初始化时,初始化了很多参数配置,比如:按键监听、手势监听等,因此mui页面都必须调用一次mui.init()方法;
  2. 页面跳转
    抛弃href跳转,当浏览器加载一个新页面时,若页面DOM尚未渲染完毕,页面会先显示空白,然后等DOM渲染完毕后,再显示具体内容,这是WEB浏览器技术无法逾越的体验障碍;为解决这个问题,建议使用mui.openWindow方法打开一个新的webview,mui会自动监听新页面的loaded事件,若加载完毕,再自动显示新页面;
  3. 手势操作
    点击:忘记click,快速响应是mobile App实现的重中之重,研究表明,当延迟超过100毫秒,用户就能感受到界面的卡顿,然而手机浏览器的click点击存在300毫秒延迟(至于为何会延迟,及300毫秒的来龙去脉,请自行谷百),mui为了解决这个问题,封装了tap事件,因此在任何点击的时候,请忘记click及onclick操作

常用组件和插件

	MUI内置了丰富的组件和插件,方便开发者直接调用和使用,另外运行在手机端时,MUI还把原生安卓和IOS的相关API封装在mui-plus 方便开发者直接调用与设置,通过单纯的使用H5开发实现与原生APP相接近的用户体验。
  1. 刷新和日期控件
  2. 弹框控件:
  3. 二级联动和三级联动
  4. 进度条控件
  5. 图标展示控件
  6. 图库预览插件(支持多图片预览)
  7. 客户列表控件(支持多条件查询)

标签:控件,bar,MUI,content,初识,type,mui,页面
来源: https://blog.csdn.net/L_smwy/article/details/121523357