MUI框架-08-窗口管理-創建子頁面
阿新 • • 發佈：2018-09-27
head window dcloud ade -m 處理 什麽 cell 子頁面
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“模板，可以快速生成mui頁面模板，該模板默認處理了 mui 的js、css資源引用
- 3.打開index.html 文件
- 4.在body裏面，輸入mheader
- 頂部標題欄是每個頁面都必需的內容，在Hbuilder中輸入mheader，可以快速生成頂部導航欄
- 5.在body裏面，輸入mbody
- 除頂部導航、底部選項卡兩個控件之外，其它控件都建議放在.mui-content控件內，在Hbuilder中輸入mbody，可快速生成包含.mui-content的代碼塊
- 6.找到頁面中一對 script 便簽，裏面含有 init()
- 7.將這對標簽剪切到 header 頭部和nav 腳部，標簽的位置，這個應該很容易理解，就是我們加載頁面的地方
- 8..寫入如下代碼;
<script type="text/javascript" charset="utf-8"> mui.init({ subpages:[{ url:'html/content.html',//根據自己的目錄修改 id:'content.html',//隨意 styles:{ top:'45px',//mui標題欄默認高度為45px； bottom:'0px'//默認為0px，可不定義； } }] }); </script>
- 9.然後打開在 html 目錄下那個新建的 html文件，拷貝如下代碼：
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="../css/mui.min.css" rel="stylesheet" /> </head> <body> <div class="mui-content"> <div class="mui-slider"> <div class="mui-slider-group"> <!--第一個內容區容器--> <div class="mui-slider-item"> <!-- 具體內容 --> <img src="../img/1D52F569E73F611465E9BB3656E9628B.png"/> </div> <!--第二個內容區--> <div class="mui-slider-item"> <!-- 具體內容 --> <img src="../img/8CF9B879550CD10AA9B7B58777367C7F.png"/> </div> </div> </div> <ul class="mui-table-view"> <li class="mui-table-view-cell mui-media"> <a href="javascript:;"> <img class="mui-media-object mui-pull-left" src="../img/IMG_4234.JPG"> <div class="mui-media-body"> 幸福 <p class="mui-ellipsis">能和心愛的人一起睡覺，是件幸福的事情；可是，打呼嚕怎麽辦？</p> </div> </a> </li> <li class="mui-table-view-cell mui-media"> <a href="javascript:;"> <img class="mui-media-object mui-pull-left" src="../img/IMG_4221.JPG"> <div class="mui-media-body"> 木屋 <p class="mui-ellipsis">想要這樣一間小木屋，夏天挫冰吃瓜，冬天圍爐取暖.</p> </div> </a> </li> <li class="mui-table-view-cell mui-media"> <a href="javascript:;"> <img class="mui-media-object mui-pull-left" src="../img/IMG_4234.JPG"> <div class="mui-media-body"> 幸福 <p class="mui-ellipsis">能和心愛的人一起睡覺，是件幸福的事情；可是，打呼嚕怎麽辦？</p> </div> </a> </li> <li class="mui-table-view-cell mui-media"> <a href="javascript:;"> <img class="mui-media-object mui-pull-left" src="../img/IMG_4221.JPG"> <div class="mui-media-body"> 幸福 <p class="mui-ellipsis">能和心愛的人一起睡覺，是件幸福的事情；可是，打呼嚕怎麽辦？</p> </div> </a> </li> <li class="mui-table-view-cell mui-media"> <a href="javascript:;"> <img class="mui-media-object mui-pull-left" src="../img/IMG_4234.JPG"> <div class="mui-media-body"> 幸福 <p class="mui-ellipsis">能和心愛的人一起睡覺，是件幸福的事情；可是，打呼嚕怎麽辦？</p> </div> </a> </li> <li class="mui-table-view-cell mui-media"> <a href="javascript:;"> <img class="mui-media-object mui-pull-left" src="../img/IMG_4234.JPG"> <div class="mui-media-body"> 幸福 <p class="mui-ellipsis">能和心愛的人一起睡覺，是件幸福的事情；可是，打呼嚕怎麽辦？</p> </div> </a> </li> </ul> </div> <script src="../js/mui.min.js"></script> <script type="text/javascript"> mui.init() </script> </body> </html>
- 這時候回到 index 頁面 預覽看到的依然像是一個頁面，實際不是的，在單個頁面時候不容易體現這種優勢，當通過底部標簽切換頁面的時候，就可以體會到了，頭部和底部是不動的，接近原生app 的體驗
官方文檔
更多文章鏈接：MUI 框架
- 本筆記不允許任何個人和組織轉載
MUI框架-08-窗口管理-創建子頁面