MUI（5）

時間 2019-11-12

標籤 mui 简体版

原文原文鏈接

今天實現9宮格菜單。先上效果圖：
javascript

就是這個效果咯，界面不太美觀，底部導航欄是爲了蘋果用戶沒有返回按鍵設計的，只是爲了方便演示而已，沒有作過多的處理。
首先先說一下這個底部導航欄如何實現，這個底部導航欄小編我寫在了主頁面index.html中，下面附上代碼：css

1 <!-- 底部nav開始 -->
2 <nav class="mui-bar mui-bar-tab">
3     <a id="goBack" class="mui-tab-item mui-active">
4         <span class="mui-icon mui-icon-back"></span>
5         <span class="mui-tab-label">返回</span>
6     </a>
7 </nav>
8 <!-- 底部nav結束 -->

注意到底部導航欄a標籤有個id：「goBack」，存在即合理，這個id不會是空穴來風的啦。是爲了實現點擊返回到主頁面的功能而存在的，舉個例子，主頁面加載9宮格，隨便點擊進入一個格子內，怎麼返回到主頁面呢？安卓機有返回按鍵，可是蘋果機用戶呢？沒有返回按鍵，因此爲了考慮到蘋果用戶，特地設置了一個返回按鈕提供實現返回主頁面的功能。html

 1 //返回上一頁
 2             document.getElementById("goBack").addEventListener('tap', function() {
 3                 var webs = plus.webview.all();
 4                 var k = webs.length;
 5                 if(k > 1) {
 6                     for(i = k - 1; i > 0; i--) {
 7                         if(webs[i].id.indexOf('tlwtt_') != -1) {
 8                             webs[i].hide('none');
 9                         } else {
10 
11                         }
12                     }
13                 }
14             });

注意到上面這串代碼的第7行會發現webs[i].id.indexOf('tlwtt_')，存在即合理。聽小編慢慢道來哈，首先咱們看到的主界面，其實是由兩個頁面組合而成的，index.html和index_list.html頁面，前面的博文有提到。若是沒有字符串匹配的話，那麼當咱們在咱們看到的主界面點擊返回的時候，會返回到index.html頁面，這個頁面只有一個頭部導航欄，這就很尷尬了。因此爲了避免能返回到index.html，特地設置id前綴。
實現9宮格效果，小編新建了一個頁面爲：grid_default.html頁面，而後將index.html頁面作一下修改，修改內容以下：java

 1 /**
 2              * 加載另外一個頁面
 3              * */
 4             mui.init({
 5                 subpages: [{
 6                     url: "html/grid_default.html", //子頁面HTML地址，支持本地地址和網絡地址
 7                     id: "index_list", //子頁面標誌
 8                     styles: {
 9                         top: '45px', //子頁面頂部位置，mui標題欄默認高度爲45px
10                         bottom: '50px' //子頁面底部位置，默認爲0px，可不定義
11                     }
12                 }]
13             });

修改部分爲上面這串代碼的第6行，以前是index_list.html頁面。
新頁面grid_default.html頁面代碼以下：web

  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     </head>
 10 
 11     <body>
 12         <div class="mui-content">
 13             <ul class="mui-table-view mui-grid-view mui-grid-9" style="margin-top: 0px;margin-bottom: 50px;">
 14                 <li id="home" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
 15                     <a href="#">
 16                         <span class="mui-icon mui-icon-home"></span>
 17                         <div class="mui-media-body">Home</div>
 18                     </a>
 19                 </li>
 20                 <li id="email" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
 21                     <a href="#">
 22                         <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
 23                         <div class="mui-media-body">Email</div>
 24                     </a>
 25                 </li>
 26                 <li id="chat" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
 27                     <a href="#">
 28                         <span class="mui-icon mui-icon-chatbubble"></span>
 29                         <div class="mui-media-body">Chat</div>
 30                     </a>
 31                 </li>
 32                 <li id="location" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
 33                     <a href="#">
 34                         <span class="mui-icon mui-icon-location"></span>
 35                         <div class="mui-media-body">location</div>
 36                     </a>
 37                 </li>
 38                 <li id="search" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
 39                     <a href="#">
 40                         <span class="mui-icon mui-icon-search"></span>
 41                         <div class="mui-media-body">Search</div>
 42                     </a>
 43                 </li>
 44                 <li id="phone" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
 45                     <a href="#">
 46                         <span class="mui-icon mui-icon-phone"></span>
 47                         <div class="mui-media-body">Phone</div>
 48                     </a>
 49                 </li>
 50                 <li id="setting" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
 51                     <a href="#">
 52                         <span class="mui-icon mui-icon-gear"></span>
 53                         <div class="mui-media-body">Setting</div>
 54                     </a>
 55                 </li>
 56                 <li id="about" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
 57                     <a href="#">
 58                         <span class="mui-icon mui-icon-info"></span>
 59                         <div class="mui-media-body">about</div>
 60                     </a>
 61                 </li>
 62                 <li id="more" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
 63                     <a href="#">
 64                         <span class="mui-icon mui-icon-more"></span>
 65                         <div class="mui-media-body">more</div>
 66                     </a>
 67                 </li>
 68             </ul>
 69         </div>
 70         <script src="../js/mui.min.js"></script>
 71         <script type="text/javascript">
 72             mui.init();
 73             // 擴展API加載完畢後調用onPlusReady回調函數
 74             document.addEventListener('plusready', onPlusReady, false);
 75             // 擴展API加載完畢，如今能夠正常調用擴展API
 76             function onPlusReady() {}
 77             var myUrl = "tlwtt_";
 78             //Home
 79             document.getElementById("home").addEventListener('tap', function() {
 80                 mui.openWindow({
 81                     url: "home.html", //新頁面地址
 82                     id: myUrl + "home", //新頁面id
 83                     styles: {
 84                         top: '45px', //新頁面距離頂部位置
 85                         bottom: '50px' //新頁面距離底部位置
 86 
 87                     },
 88                     show: {
 89                         autoShow: true, //頁面loaded事件發生後自動提示，默認爲true
 90                         aniShow: "slide-in-right", //頁面顯示動畫，默認爲「slide-in-right」
 91                         duration: 100 //頁面動畫持續時間，Android平臺默認100毫秒，iOS平臺默認200毫秒
 92                     },
 93                     waiting: {
 94                         autoShow: true, //自動顯示等待框，默認爲true
 95                         title: '正在加載...' //等待對話框上顯示的提示內容
 96                     }
 97                 });
 98             });
 99             //Email
100             document.getElementById("email").addEventListener('tap', function() {
101                 mui.openWindow({
102                     url: "email.html",
103                     id: myUrl + "email",
104                     styles: {
105                         top: '45px',
106                         bottom: '50px'
107                     }
108                 });
109             });
110             //Chat
111             document.getElementById("chat").addEventListener('tap', function() {
112                 mui.openWindow({
113                     url: "chat.html",
114                     id: myUrl + "chat",
115                     styles: {
116                         top: '45px',
117                         bottom: '50px'
118                     }
119                 });
120             });
121             //location
122             document.getElementById("location").addEventListener('tap', function() {
123                 mui.openWindow({
124                     url: "location.html",
125                     id: myUrl + "location",
126                     styles: {
127                         top: '45px',
128                         bottom: '50px'
129                     }
130                 });
131             });
132             //Search
133             document.getElementById("search").addEventListener('tap', function() {
134                 mui.openWindow({
135                     url: "search.html",
136                     id: myUrl + "search",
137                     styles: {
138                         top: '45px',
139                         bottom: '50px'
140                     }
141                 });
142             });
143             //Phone
144             document.getElementById("phone").addEventListener('tap', function() {
145                 mui.openWindow({
146                     url: "phone.html",
147                     id: myUrl + "phone",
148                     styles: {
149                         top: '45px',
150                         bottom: '50px'
151                     }
152                 });
153             });
154             //Setting
155             document.getElementById("setting").addEventListener('tap', function() {
156                 mui.openWindow({
157                     url: "setting.html",
158                     id: myUrl + "setting",
159                     styles: {
160                         top: '45px',
161                         bottom: '50px'
162                     }
163                 });
164             });
165             //about
166             document.getElementById("about").addEventListener('tap', function() {
167                 mui.openWindow({
168                     url: "about.html",
169                     id: myUrl + "about",
170                     styles: {
171                         top: '45px',
172                         bottom: '50px'
173                     }
174                 });
175             });
176             //more
177             document.getElementById("more").addEventListener('tap', function() {
178                 mui.openWindow({
179                     url: "more.html",
180                     id: myUrl + "more",
181                     styles: {
182                         top: '45px',
183                         bottom: '50px'
184                     }
185                 });
186             });
187         </script>
188     </body>
189 
190 </html>

9宮格是<ul><li>實現，每個圖標均是一個<li>，那麼給9宮格中的<li>賦予一個id值，而後監聽tap事件，打開相應的頁面。注意了，爲了不將index.html頁面的頭部導航欄以及底部導航欄遮蓋住，因此須要設置styles，即：瀏覽器

styles: {
                         top: '45px',
                         bottom: '50px'
                     }

這麼作的目的是讓其在界面中間部位顯示出來。
提示一下，這幾行代碼必定要注意不要忘記：網絡

1 mui.init();
2             // 擴展API加載完畢後調用onPlusReady回調函數
3             document.addEventListener('plusready', onPlusReady, false);
4             // 擴展API加載完畢，如今能夠正常調用擴展API
5             function onPlusReady() {}

爲了不返回到index.html頁面，小編加了一個id前綴，將其加在了grid_default.html頁面中，以下所示：ide

 1 var myUrl = "tlwtt_";
 2             //Home
 3             document.getElementById("home").addEventListener('tap', function() {
 4                 mui.openWindow({
 5                     url: "home.html", //新頁面地址
 6                     id: myUrl + "home", //新頁面id
 7                     styles: {
 8                         top: '45px', //新頁面距離頂部位置
 9                         bottom: '50px' //新頁面距離底部位置
10 
11                     },
12                     show: {
13                         autoShow: true, //頁面loaded事件發生後自動提示，默認爲true
14                         aniShow: "slide-in-right", //頁面顯示動畫，默認爲「slide-in-right」
15                         duration: 100 //頁面動畫持續時間，Android平臺默認100毫秒，iOS平臺默認200毫秒
16                     },
17                     waiting: {
18                         autoShow: true, //自動顯示等待框，默認爲true
19                         title: '正在加載...' //等待對話框上顯示的提示內容
20                     }
21                 });
22             });

上面這串代碼中的第一行就是id前綴，第6行代碼有顯示，已經添加了id前綴，這個home格子的tap事件實現效果，後面的tap事件，小編沒有寫show，waiting什麼的，若是寫的話，參照home便可。關於打開新頁面，官方文檔中這麼描述：（官方文檔地址：http://dev.dcloud.net.cn/mui/window/#openwindow），爲了方便查看，小編給你們截圖哈，由於小編髮現若是複製文字的話，可能會由於排版問題致使錯亂，不方便閱讀。
函數

若是在其餘地方看到小編的這篇博文，若是發現圖片帶有水印，不方便閱讀的話，能夠來小編博文的首發站點來查看，小編不加水印是爲了方便閱讀，可是一些其餘站點轉載後卻自行加上了其網站水印，雖然防盜了，可是卻影響力讀者閱讀，因小失大。小編目前博文首發站點是博客園，進入博客園官網，在瀏覽器地址欄輸入tenglongwentian，以後按鍵盤迴車鍵便可看到小編的博文了。
回到正題，上面的這幅截圖是官方文檔的部份內容截圖，閱讀官方文檔實際上是個好習慣哈，慢慢培養哈，會有好處的。
測試

上面這幅圖就是點擊9宮格界面第一個格子home後的效果，其餘格子效果相似。頭部導航和底部導航均沒有被遮蓋住哈，點擊底部導航返回便可返回到主界面：

測試機型參數：Android4.2.2版本。

1. MUI（5）
2. mui-5+api(plus)加載順序
3. Mui、HTML5+、5+Runtime的關係說明
4. MUI 5+plus 獲取APP根目錄
5. mui開發app之html5+,5+Runtime,5+sdk,native.js
6. mui
7. MUI——MUI左滑刪除、MUI右滑刪除、MUI左\右滑刪除
8. Vue + Mui
9. MUI（2）
10. Hbulider & MUI
更多相關文章...
• PHP 5 常量 - PHP教程
• PHP 5 時區 - PHP參考手冊
• JDK13 GA發佈：5大特性解讀
• RxJava操作符（三）Filtering

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。