序
移動端的web網頁使用的是響應式設計，但一般我們看到的網站頁面都是跳轉刷新得到的，比如通過點擊一個menu后進入到另一個頁面
今天來說下是移動端的單頁面的布局。單頁面就是一切操作和布局都是在一個頁面下進行 不需要頁面跳轉 ，再通俗的說就是類似於平常的選項卡
但是他又比選項卡要復雜一點 因為他是在手機端 並且當做是一個頁面
單頁面的作用以及優勢：
1.嵌套到native里實現app的混合開發
2.數據量小的頁面用單頁面便於開發和維護
3.無需跳轉頁面響應更快
Demo效果
掃描二維碼 ，或直接用手機訪問 http://www.feman.cn/h5/html5mobileLayout.html
代碼實踐
1 頁面html結構
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"/> <title>html5 移動端單頁面布局</title> </head> <body> <!--頁面主體部分--> <div class="main"> <section class="curr"> <img src="https://d13yacurqjgara.cloudfront.net/users/136389/screenshots/1732382/dashboardfash_perspective_1x.png" alt=""> <img src="https://d13yacurqjgara.cloudfront.net/users/1061/screenshots/678418/pixelplant_ipad.jpg" alt=""> <img src="https://d13yacurqjgara.cloudfront.net/users/255/screenshots/1332988/blog_1x.png" alt=""> <img src="https://d13yacurqjgara.cloudfront.net/users/188162/screenshots/1143662/satigo_website_1x.jpg" alt=""> </section> <section class="hide"> <img src="https://d13yacurqjgara.cloudfront.net/users/4404/screenshots/757400/css3.jpg" alt=""> <img src="https://d13yacurqjgara.cloudfront.net/users/1061/screenshots/620200/camerastore.jpg" alt=""> <img src="https://d13yacurqjgara.cloudfront.net/users/269922/screenshots/1008644/files.jpg" alt=""> <img src="https://d13yacurqjgara.cloudfront.net/users/12787/screenshots/1243088/dribbblemini_1x.png" alt=""> </section> <section class="hide"> <img src="https://d13yacurqjgara.cloudfront.net/users/84550/screenshots/1236264/clip.png" alt=""> <img src="https://d13yacurqjgara.cloudfront.net/users/2158/screenshots/377946/hra.png" alt=""> </section> <section class="hide"> <img src="https://d13yacurqjgara.cloudfront.net/users/114529/screenshots/534146/scienza2.jpeg" alt=""> <img src="https://d13yacurqjgara.cloudfront.net/users/33345/screenshots/1150666/zen-of-ruby_1x.png" alt=""> <img src="https://d13yacurqjgara.cloudfront.net/users/33345/screenshots/965067/company-info_1x.png" alt=""> </section> </div> <!--頁面菜單按鈕--> <div class="menu"> <ul> <li class="curr">Html5</li> <li>Css3</li> <li>Javascript</li> <li>About</li> </ul> </div> <script src="js/zepto.js"></script> </body> </html>
注：頁面圖片均來自dribbble
demo里面我用的全是圖片靜態展示 你可以添加自己的結構或動態程序
頁面結構跟我們平常寫的選項卡沒什么區別，接下來我們用css裝飾這個結構讓他在手機上呈現出頁面的效果
2 css
<style> /*初始化css*/ *{ margin:0; padding: 0;} li{ list-style-type: none;} img{ max-width: 100%; display: block; margin: 0 auto 5px auto;} html,body{ width: 100%; height: 100%; background: #e4e4e4; -webkit-tap-highlight-color: rgba(88,44,22,0.9); -webkit-touch-callout: none; -webkit-user-select: none; } /*主體頁面樣式*/ .main{ width: 100%; height: auto; position: relative;} .main section{ width: 100%; height: auto; position:absolute; left: 0; top:0; } .main section.hide{ display: none;} .main section.curr{ display: block;} /*菜單樣式*/ .menu{ width: 100%; height: 45px; position: fixed; bottom:0; left:0; box-shadow: #2d2d2d 0 0 4px;background:#0099cc;} .menu.menucurr{ background: #ea4c88;} .menu ul{width: 100%; height: 100%; } .menu li{ width: 24.9%; height: 100%; float: left; line-height: 45px; text-align: center; background: #0099cc; color:#fff;} .menu li.curr{ background: #ea4c88;} .menu li:nth-child(1),.menu li:nth-child(2),.menu li:nth-child(3){ border-right:1px solid #663300;} </style>
移動端的頁面多數情況下用百分比或者媒體查詢來設置頁面的寬高度 這樣會達到響應的效果
這里解釋幾點
1.-webkit-tap-highlight-color: rgba(0,0,0,0);也可以寫成-webkit-tap-highlight-color: transparent; 去掉點擊時高光顯示 你也可以更改里面的參數 達到你想要的點擊顯示高光效果
2.-webkit-touch-callout: none; //長按頁面時不觸發系統菜單
3.-webkit-user-select: none; //長按無法選擇文本 這個很有用 一般如果body里面沒有添加這個屬性的手機頁面 當我們長按某段文字的時候就會出現選中這段文字彈出“復制，全選”等選項 但在webapp開發里 這個就顯得很不友好 所以尤其是在webapp開發的時候 為了達到與native一樣的真實效果 必須的添加
4.html,body{ width: 100%; height: 100%;} 這個是整個文檔的初始化寬高度 后面的子級都是按照這個數據設置
5.main和子級的height都設置為auto 你也可以不用設 但如果你的頁面是允許滾動的話最好還是要設一下
6.我們把menu使用固定定位到頁面底部 你也可以把他定位在頂部 或任何你想定位的地方
7.menu 里面的tab我們使用的是百分比分配 因為有border-right所以不能很准確的分配多少 這個應該會有什么更精准的方法平均分配 待研究 (這個已解決 用css3的display:flex 可以實現平分的效果)
3 js
<script> $(function(){ $(".menu li").each(function(index){ $(this).tap(function(){ $(this).addClass("curr").siblings().removeClass("curr"); $(".main section").eq(index).show().siblings().hide(); if(index==3){ $(".menu").addClass("menucurr"); }else{ $(".menu").removeClass("menucurr"); } }) }) }) </script>
引用的框架是zepto.js 目前移動開發比較流行的js框架 zepto的語法跟jquery是相通的 所以可以按照jquery的寫法編寫
這里的點擊menu事件不是使用click而是tap 這是zepto為移動端專門編寫的一個點擊方法 確切的說應該叫輕觸 他比click的點擊速度要快 使用的是touch事件 這個在默認的zepto里面是沒有的 需要把touch這個模塊兒添加進來才可使用tap
這樣一個移動端的單頁面就完成了
這是個比較簡單的單頁面
根據這個思維還可以更靈活的編寫一些動態的並且更絢麗的頁面！