前端框架MUI学习笔记(1)–页面跳转
MUI据说是最接近原生App体验的高性能前端框架。
已经用MUI做个一个不是很成熟的App迷你课表 大家可以下载看一下。
MUI配合Hbuilder编辑器可实现快速编码,也可以在线打包,比较方便。
下面说一下在使用这个框架中最令我困惑的东西,页面跳转,刚开始我页面跳转使用window.location,有时候跳转过去之后页面还没有准备好,MUI封装了自己的页面打开的方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
mui.openWindow({ url:new-page-url, id:new-page-id, styles:{ top:newpage-top-position,//新页面顶部位置 bottom:newage-bottom-position,//新页面底部位置 width:newpage-width,//新页面宽度,默认为100% height:newpage-height,//新页面高度,默认为100% ...... }, extras:{ .....//自定义扩展参数,可以用来处理页面间传值 } show:{ autoShow:true,//页面loaded事件发生后自动显示,默认为true aniShow:animationType,//页面显示动画,默认为”slide-in-right“; duration:animationTime//页面动画持续时间,Android平台默认100毫秒,iOS平台默认200毫秒; }, waiting:{ autoShow:true,//自动显示等待框,默认为true title:'正在加载...',//等待对话框上显示的提示内容 options:{ width:waiting-dialog-widht,//等待框背景区域宽度,默认根据内容自动计算合适宽度 height:waiting-dialog-height,//等待框背景区域高度,默认根据内容自动计算合适高度 ...... } } }) |
URL不用说,当然就是要打开页面的地址了,ID是页面的标志,以后在关闭页面的时候会有用。
主要说说他们这个Styles,TOP,BOTTOM,子页面距离顶部的大小,可以都设置成45px,那么新打开的页面显示范围是
比如打开页面集成父页面的标题栏可以这么做,如果需要保留底部的菜单栏的也可以。
其他关于MUI框架教程,5+Runtime学习请点击
1. MUI 页面间跳转
3.手势事件配置
4.MUI学习笔记(4)–自定义事件,跨webview事件监听,跨页面刷新
6. 使用 Vue 开发
ahua
2017年6月28日 09:52
Uncaught Error: webview[companyDetails.html] does not exist,列表页面传值报错,点击列表的时候报错