mui框架如何在首页使用侧滑导航

说明:这是针对老版本hello mui的一篇说明;mui 0.7.1之后,Hello mui已在首页增加了侧滑导航示例,可直接参考。

很多同学直接拷贝Hello mui中的侧滑导航示例,作为App的首页,发现侧滑效果总是和示例不同,很是疑惑;

其实,首页侧滑不生效的原因主要有两点:
1、首页面不是通过mui.openWindow()方法打开的,而是5+ runtime直接打开的,因此不会触发pagebeforeshow事件,故menu页面没创建成功,移动主页面后,漏出了更下方的loading界面;
2、hello mui中侧滑主界面zindex值为9999,menu页面zindex值为9998,在主界面下方,移动主界面会漏出其下方的menu界面;而App首页主界面的zindex值为0(mui.openWindow方法若不传zindex值,默认也是0),若再创建zindex值为9998的menu页面(zindex类似css中的z-index,值越大,显示越靠上),menu页面就会遮罩在主界面上方;

第一个问题的解决方法比较简单,使用plusReady事件代替pagebeforeshow事件即可;

第二个问题的解决,也比较简单,设置menu的zindex更低即可,比如设置为-1;

修改后的主页面代码如下:

mui.plusReady(function() {
        var left = ‘0%‘;
        if (slideTogether) {
            left = ‘-70%‘;
        }
        //创建menu页面
        menu = mui.createWindow({
            id: ‘offcanvas-plus-menu‘,
            url: ‘offcanvas-plus-menu.html‘,
            styles: {
                left: left,
                width: ‘70%‘,
                zindex:-1
            }
        });
        if (menu) {
            menu.show(‘none‘);
        }
    });

另外,首页的关闭通常采用toast提示的方式,对应需要修改。

时间: 2024-07-29 08:38:34

mui框架如何在首页使用侧滑导航的相关文章

mui框架中底部导航的跳转1

mui框架极大的方便了app的开发但是我们在做页面之间的切换时发现不能实现 a 链接的跳转,这是应为mui相关的一些控件是通过拦截a标签上的href来实现的,所以mui.js会阻止a标签上的href跳转, 为了让我们通过触摸下面的导航之后,把相对应的子页面加载到首页的内容区在index.html 下写: 地不连接为 让为了让内容在首页窗体内显示,我们还需要写下面的代码: 这里要注意的是其他页面上要有内容不然看不出来,必须是真机测试才能看出效果

MUI组件三:列表、遮罩蒙版、数字输入框、侧滑导航和弹出菜单

1.list(列表) 列表是常用的UI控件,mui封装的列表组件比较简单,只需要在ul节点上添加.mui-table-view类.在li节点上添加.mui-table-view-cell类即可,如下为示例代码 <ul class="mui-table-view"> <li class="mui-table-view-cell">Item 1</li> <li class="mui-table-view-cell&q

MUI框架-02-注意事项-适用场景-实现页面间传值

MUI框架-02-注意事项-适用场景-实现页面间传值 关于开发,我拷贝太多也没什么意义,就请查阅:官方文档:http://dev.dcloud.net.cn/mui/ui/ 快速入门 - 注意事项 有些可能看不懂,这样排是为了可以做 MUI 开发的时候,养成良好的习惯,避免不必要的错误 DOM 结构: 关于 mui 页面的 dom,你需要知道如下规则 固定栏靠前: 所谓的固定栏,也就是带有.mui-bar 属性的节点,都是基于 fixed 定位的元素: 常见组件包括:顶部导航栏(.mui-bar

【MUI框架】学习笔记整理 Day 1

MUI 框架之 [原生UI] (1)accordion(折叠面板) 由二级列表演化而来 1 <ul class="mui-table-view"> 2 <li class="mui-table-view-cell mui-collapse"> 3 <a class="mui-navigate-right" href="#"></a> 4 <div class="m

利用 MUI开发app, 如何实现侧滑菜单及其主体部分上下滑动

 利用mui开发APP 之侧滑菜单主内容滚动问题 MUI作为开发者常用的框架之一,其号称最接近原生APP体验的高性能前端框架.因此利用mui开发移动APP,可以为开发者提供很大的便利和接近原生的体验.但是,在实现一些复杂功能的过程中,难免遇到一些小问题.博主将以自己在项目开发中的一些的经验,陆续对mui使用中容易遇到的小问题,予以解答和分享,希望能帮到更多的开发者朋友. 最近,博主在项目开发过程中遇到这样一个问题,即利用mui侧滑菜单模块,实现APP的侧滑菜单效果时,侧滑菜单加入以后,将影响自身

MUI框架

Hbuilder中敲mheader生成的代码块,会自动生成带有返回导航箭头的标题栏,点击返回箭头可关闭当前页面,原因就是因为该返回箭头包含.mui-action-back类,代码如下: <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class=&

MUI框架的缩写输入

html 上面--代表最小触发字符 下面--代表非必要完整触发字符 组件 触发字符 mDoctype(mui-dom结构) mdo ctype mBody(主体) mbo dy mScroll(区域滚动容器) msc roll mrefreshContainer(刷新容器) mre fresh mHeader(标题栏) mhe ader mHeader(带返回箭头的标题栏) mhe aderwithBack mCheckbox(复选框) mch eckbox mCheckbox(复选框居左) m

MUI框架-01-介绍-创建项目-简单页面

MUI框架-01-介绍-准备-创建项目 从0开始快速高效学习 MUI 框架 官方文档:http://dev.dcloud.net.cn/mui/ui/ (1)MUI 介绍 MUI 是什么,解决了什么问题? MUI 官方号称最接近原生APP体验的高性能前端框架 简单的说就是webapp的以个开发框架 webapp和原生app性能及体验的差距,一直是移动app开发者放弃HTML5的首要原因. 浏览器天生的切页白屏.不忍直视的转页动画.浮动元素的抖动.无法流畅下拉刷新等问题,这些都让HTML5开发者倍

MUI框架-08-窗口管理-创建子页面

MUI框架-08-窗口管理-创建子页面 之前写过这一篇,不知道为什么被删了,我就大概写了,抱歉 创建子页面是为了,页面切换时,外面的页面不动,让 MUI 写出来的页面更接近原生 app 官方文档:http://dev.dcloud.net.cn/mui/window/#subpage 创建子页面 1.在HBuilder 新建移动app项目,选择 mui 3.新建html目录用来存放html文件,新建含 mui 的HTML文件 在 Hbuilder 中,新建HTML文件,选择"含 mui的HTML