html5 移動端單頁面佈局

時間 2019-12-20

標籤 html5 html 移動頁面佈局欄目 HTML5 简体版

原文原文鏈接

序
移動端的web網頁使用的是響應式設計，但通常咱們看到的網站頁面都是跳轉刷新獲得的，好比經過點擊一個menu後進入到另外一個頁面
今天來講下是移動端的單頁面的佈局。單頁面就是一切操做和佈局都是在一個頁面下進行不須要頁面跳轉，再通俗的說就是相似於日常的選項卡
可是他又比選項卡要複雜一點由於他是在手機端而且當作是一個頁面css

單頁面的做用以及優點：
1.嵌套到native裏實現app的混合開發
2.數據量小的頁面用單頁面便於開發和維護
3.無需跳轉頁面響應更快html

Demo效果html5

掃描二維碼，或直接用手機訪問 http://www.feman.cn/h5/html5mobileLayout.htmljquery

代碼實踐css3

1 頁面html結構web

<!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>

注：頁面圖片均來自dribbbleruby

demo裏面我用的全是圖片靜態展現你能夠添加本身的結構或動態程序
頁面結構跟咱們日常寫的選項卡沒什麼區別，接下來咱們用css裝飾這個結構讓他在手機上呈現出頁面的效果app

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 能夠實現平分的效果)webapp

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

這樣一個移動端的單頁面就完成了

這是個比較簡單的單頁面

根據這個思惟還能夠更靈活的編寫一些動態的而且更絢麗的頁面！