前端框架MUI学习笔记（1）–页面跳转

2019独角兽企业重金招聘Python工程师标准>>>

 MUI据说是最接近原生App体验的高性能前端框架。

 

已经用MUI做个一个不是很成熟的App迷你课表 大家可以下载看一下。

MUI配合Hbuilder编辑器可实现快速编码，也可以在线打包，比较方便。

下面说一下在使用这个框架中最令我困惑的东西，页面跳转，刚开始我页面跳转使用window.location，有时候跳转过去之后页面还没有准备好，MUI封装了自己的页面打开的方法

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,//等待框背景区域高度，默认根据内容自动计算合适高度

        ......

      }

    }

})

主要说说他们这个Styles，TOP，BOTTOM，子页面距离顶部的大小，可以都设置成45px，那么新打开的页面显示范围是URL不用说，当然就是要打开页面的地址了，ID是页面的标志，以后在关闭页面的时候会有用。

比如打开页面集成父页面的标题栏可以这么做，如果需要保留底部的菜单栏的也可以。

转载于:https://my.oschina.net/mickelfeng/blog/829447