MUI（2）

時間 2019-11-12

標籤 mui 简体版

原文原文鏈接

本篇博文是繼續MUI（1）博文。
　　上一篇博文小編寫了兩個頁面，一個頁面只寫了一個頭部導航欄，另外一個頁面寫了一個按鈕，而後這兩個頁面進行合併顯示，即在頭部導航欄頁面加載顯示另外一個頁面的按鈕。仔細觀察上一篇的最後截圖效果會發現，在頭部導航欄的左上角有一個側滑圖標，本篇博文就是實現一個側滑菜單效果。
　　仍是繼續上一篇博文中應用到的項目，只是在以前項目的基礎之上新建了一個頁面，index_menu.html頁面。
index.html頁面源代碼以下：javascript

  1 <!DOCTYPE html>
  2 <html>
  3 
  4     <head>
  5         <meta charset="utf-8">
  6         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7         <title></title>
  8         <script src="js/mui.min.js"></script>
  9         <link href="css/mui.min.css" rel="stylesheet" />
 10     </head>
 11 
 12     <body>
 13         <!-- 頭部header開始 -->
 14         <header class="mui-bar mui-bar-nav">
 15             <a class="mui-icon mui-icon-bars mui-pull-left"></a>
 16             <a id="info" class="mui-icon mui-icon-info-filled mui-pull-right" style="color: #999;"></a>
 17             <h1 class="mui-title">首頁</h1>
 18         </header>
 19         <!-- 頭部header結束 -->
 20         <script type="text/javascript" charset="utf-8">
 21             mui.init({
 22                 subpages: [{
 23                     url: "html/index_list.html", //子頁面HTML地址，支持本地地址和網絡地址
 24                     id: "index_list", //子頁面標誌
 25                     styles: {
 26                         top: '45px', //子頁面頂部位置，mui標題欄默認高度爲45px
 27                         bottom: '0px' //子頁面底部位置，默認爲0px，可不定義
 28                     }
 29                 }]
 30             });
 31             var menu = null,
 32                 main = null,
 33                 showMenu = false;
 34             mui.plusReady(function() {
 35                 /*plus.screen.lockOrientation("portrait-primary");//僅僅支持豎屏顯示*/
 36                 main = plus.webview.currentWebview();
 37                 main.addEventListener('maskClick', closeMenu);
 38                 //處理側滑導航，爲了不和子頁面初始化等競爭資源，延遲加載側滑頁面
 39                 setTimeout(function() {
 40                     menu = mui.preload({
 41                         id: 'index_menu',
 42                         url: 'html/index_menu.html',
 43                         styles: {
 44                             left: '0px',
 45                             width: '70%',
 46                             zindex: -1
 47                         },
 48                         show: {
 49                             aniShow: 'none'
 50                         }
 51                     });
 52                 }, 200);
 53             });
 54             var isInTransition = false;
 55             /*顯示側滑菜單*/
 56             function openMenu() {
 57                 if(isInTransition) {
 58                     return;
 59                 }
 60                 if(!showMenu) {
 61                     //側滑菜單處於隱藏狀態，則當即顯示處理
 62                     isInTransition = true;
 63                     menu.setStyle({
 64                         mask: 'rgba(0,0,0,0)'
 65                     });
 66                     //menu設置透明遮罩防止點擊
 67                     menu.show('none', 0, function() {
 68                         //主窗體開始側滑並顯示遮罩
 69                         main.setStyle({
 70                             mask: 'rgba(0,0,0,0.4)', //遮罩蒙版
 71                             left: '70%',
 72                             transition: { //一組用於定義頁面或控件轉換效果的屬性
 73                                 duration: 150
 74                             }
 75                         });
 76                         mui.later(function() {
 77                             isInTransition = false;
 78                             menu.setStyle({
 79                                 mask: 'none'
 80                             });
 81                             //移除menu的mask
 82                         }, 160);
 83                         showMenu = true;
 84                     });
 85                 }
 86             }
 87             /*關閉菜單*/
 88             function closeMenu() {
 89                 if(isInTransition) {
 90                     return;
 91                 }
 92                 if(showMenu) {
 93                     //關閉遮罩
 94                     //主窗體開始側滑
 95                     isInTransition = true;
 96                     main.setStyle({
 97                         mask: 'none',
 98                         left: '0px',
 99                         transition: {
100                             duration: 200
101                         }
102                     });
103                     showMenu = false;
104                     //等動畫結束後，隱藏菜單webview，節省資源
105                     mui.later(function() {
106                         isInTransition = false;
107                         menu.hide();
108                     }, 300);
109                 }
110             }
111             /*點擊左上角側滑圖標,打開側滑菜單*/
112             document.querySelector('.mui-icon-bars').addEventListener('tap', function(e) {
113                 if(showMenu) {
114                     closeMenu();
115                 } else {
116                     openMenu();
117                 }
118             });
119             /*主頁面向右滑動,若菜單未顯示,則顯示菜單,不然不作任何操做*/
120             window.addEventListener('swiperight', openMenu);
121             /*主界面向左滑動,若菜單已顯示,則關閉菜單,不然,不作任何操做*/
122             window.addEventListener('swipeleft', closeMenu);
123             /*側滑菜單觸發關閉命令*/
124             window.addEventListener('menu:close', closeMenu);
125             window.addEventListener('menu:open', openMenu);
126             /*重寫 mui.menu方法,Android版本的menu按鍵按下能夠自動、關閉側滑菜單*/
127             mui.menu = function() {
128                     if(showMenu) {
129                         closeMenu();
130                     } else {
131                         openMenu();
132                     }
133                 }
134                 /*首頁返回按鍵處理,若側滑菜單顯示,則關閉側滑菜單;不然,執行mui框架默認的關閉首頁功能*/
135             var _back = mui.back;
136             mui.back = function() {
137                 if(showMenu) {
138                     closeMenu();
139                 } else {
140                     _back();
141                 }
142             }
143         </script>
144     </body>
145 
146 </html>

上面的代碼第35行的做用是實現僅僅支持豎屏顯示，可是小編屏蔽了這一行代碼，通過測試Android4.2.2系統版本支持橫屏顯示和豎屏顯示，可是Android4.4.2不支持橫屏顯示，其餘機型狀況還沒有測試，實際效果尚不明確。
關於mui.plusReady方法官方文檔中這樣說明：（官方文檔地址：http://dev.dcloud.net.cn/mui/window/）
css

關於plus.webview.currentWebview官方文檔中這樣說明：（官方文檔地址：http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.currentWebview）

關於opener官方文檔中這樣說明：（官方文檔地址：http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.opener）html

關於mui.preload官方文檔中這樣說明：（官方文檔地址：http://dev.dcloud.net.cn/mui/window/#preload）
html5

遮罩蒙版官方文檔中這樣說明：（官方文檔地址：http://dev.dcloud.net.cn/mui/ui/#mask）
java

因爲ios系統沒有和Android手機同樣的菜單和返回按鍵因此要特別注意這一點。
android

index_menu.html頁面源代碼以下：ios

 1 <!doctype html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 8         <link href="../css/mui.min.css" rel="stylesheet" />
 9         <style type="text/css">
10             body,
11             .mui-content {
12                 background-color: #333;
13                 color: #fff;
14             }
15             
16             .title {
17                 margin: 35px 15px 10px;
18             }
19             
20             .title+.content {
21                 margin: 10px 15px 35px;
22                 color: #bbb;
23                 text-indent: 1em;
24                 font-size: 14px;
25                 line-height: 24px;
26             }
27         </style>
28     </head>
29 
30     <body>
31         <div class="mui-content">
32             <div class="title">側滑導航</div>
33             <div class="content">
34                 這個頁面是側滑導航頁面，是單獨的一個頁面，做爲側滑頁面出現。關閉這個側滑菜單的方式：1.點擊這個側滑菜單頁面以外的任意位置；2.點擊下面這個紅色按鈕<span id="android-only">；3.Android手機按back鍵;4.Android手機按menu鍵</span>。
35             </div>
36             <p style="margin: 10px 15px;">
37                 <button id="close-btn" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">關閉側滑菜單</button>
38             </p>
39         </div>
40         <script src="../js/mui.min.js"></script>
41         <script type="text/javascript">
42             mui.init();//初始化
43             var aniShow = null;
44             /*由於back按鍵和menu按鍵在ios平臺不存在，因此ios平臺下面須要隱藏，避免尷尬症。*/
45             if(!mui.os.android) {
46                 var span = document.getElementById("android-only");
47                 if(span) {
48                     span.style.display = "none";
49                 }
50                 aniShow = "pop-in";//頁面顯示動畫
51             }
52             /*關閉側滑菜單*/
53             function close() {
54                 mui.fire(mui.currentWebview.opener(), "menu:close");
55             }
56             /*點擊"關閉側滑菜單"按鈕處理邏輯*/
57             document.getElementById("close-btn").addEventListener('tap', close);
58             /*在Android4.4.2中的swipe事件,須要preventDefault一下,不然觸發不正常*/
59             window.addEventListener('dragstart', function(e) {
60                 mui.gestures.touch.lockDirection = true; //鎖定方向
61                 mui.gestures.touch.startDirection = e.detail.direction;
62             });
63             window.addEventListener('swipe', function(e) {
64                 if(!mui.isScrolling) {
65                     e.detail.gesture.preventDefault();
66                 }
67             });
68             //監聽左滑事件，若菜單已展開，左滑要關閉菜單
69             window.addEventListener('swipeleft', function(e) {
70                 if(Math.abs(e.detail.angle) > 170) {
71                     close();
72                 }
73             });
74         </script>
75     </body>
76 
77 </html>