html5 移动端单页面布局

2021-11-09 13:54:29

序
移动端的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

这样一个移动端的单页面就完成了

这是个比较简单的单页面

根据这个思维还可以更灵活的编写一些动态的并且更绚丽的页面！

码农公寓

相关文章