MUI開發實戰第二集---仿今日頭條
阿新 • • 發佈：2019-01-08
這集的主要是內容仿今日頭條的頂部
在使用mui的開發過程中，需要按照mui指定好的規則進行開發，頭部和底部需要放到內容之前
這是程式碼截圖
檔案路徑參照第一集當中的設定即可<!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" /> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link href="css/mui.min.css" rel="stylesheet"/> <link href="css/index.css" rel="stylesheet"/> </head> <body> <!--頭部開始了--> <header class="mui-bar mui-bar-nav"> <a class="mui-icon mui-icon-contact mui-pull-left"></a> <a id="info" class="mui-icon mui-icon-info-filled mui-pull-right"></a> <h1 class="mui-title"> </h1> </header> <!--頭部結束了--> <script src="js/mui.min.js"></script> <script src="js/index.js"></script> </body> </html>
JS程式碼
var menu = null, main = null; var showMenu = false; mui.init({ swipeBack: false, //啟用右滑關閉功能 statusBarBackground: '#f7f7f7', gestureConfig: { doubletap: true }, subpages: [{ id: 'list', url: 'list.html', styles: { top: '45px', bottom: 0, bounce: 'vertical' } }] }); //開啟側面選單 //避免子選單和主頁同時載入 處理側滑導航，為了避免和子頁面初始化等競爭資源，延遲載入側滑頁面； mui.plusReady(function() { if (mui.os.android) { plus.screen.lockOrientation("portrait-primary"); } main = plus.webview.currentWebview(); main.addEventListener('maskClick', closeMenu); setTimeout(function() { menu = mui.preload({ id: 'login', //頁面ID url: 'login.html', //頁面地址可以是本地的，也可以是網路的 styles: { left: 0, //加載出來的樣式 距離左邊0 width: '70%', //加載出來的樣式 寬度是總寬度的70% zindex: -1 //層數是-1 }, show: { aniShow: 'none' //是否顯示 此引數是隻載入不顯示 } }) }, 200) }); /** * 顯示側滑選單 也就是開啟登陸及其它頁面 */ function openMenu() { if (!showMenu) { //側滑選單處於隱藏狀態，則立即顯示出來； menu.show('none', 0, function() { //主窗體開始側滑並顯示遮罩 main.setStyle({ mask: 'rgba(0,0,0,0.4)', left: '70%', transition: { duration: 200, } }); showMenu = true; }); } }; /** * 關閉選單 */ function closeMenu() { if (showMenu) { //關閉遮罩； //主窗體開始側滑； main.setStyle({ mask: 'none', left: '0', transition: { duration: 200 } }); showMenu = false; //等動畫結束後，隱藏選單webview，節省資源； setTimeout(function() { menu.hide(); }, 300); } }; //點選左上角側滑圖示，開啟側滑選單； //注意 如果使用addEventListener 哪麼要確保節點已經載入完畢 //最好是把JS檔案在非同頁面的最後面進行載入 tap是mui封裝的單擊事件 document.querySelector('.mui-icon-contact').addEventListener('tap', function(e) { if (showMenu) { closeMenu(); } else { openMenu(); } }) //首頁返回鍵處理 //處理邏輯：1秒內，連續兩次按返回鍵，則退出應用； var first = null; mui.back = function() { //首次按鍵，提示‘再按一次退出應用’ if (!first) { first = new Date().getTime(); mui.toast('再按一次退出應用'); setTimeout(function() { first = null; }, 1000); } else { if (new Date().getTime() - first < 1000) { plus.runtime.quit(); } } };
最後就是CSS程式碼了
.mui-bar h1.mui-title{
background: url(../img/logo.png) no-repeat center;
color: #FFFFFF;
}
.mui-bar-nav{ background:#FF0000;}
.mui-bar a{ color: #FFFFFF;}