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

Posted 2020-10-01

说明：这是针对老版本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提示的方式，对应需要修改。