說明：這是針對老版本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提示的方式，對應需要修改。

mui框架如何在首頁使用側滑導航