html5 移动端单页面布局

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

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

这是个比较简单的单页面

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

转载于:https://www.cnblogs.com/leinov/p/3983298.html

html5 移动端单页面布局相关推荐

html5 移动端单页面布局,移动端单页布局-如何更好的自适应各尺寸屏幕
#### 移动端单屏布局 > 本篇不属于汇总类的文章,而是把自认为最优的解决方案来进行一些说明. #### 为什么会有单屏布局作为一个前端开发者,我是实在没有理解单屏布局的优势在哪里,尤其是要 ...
新HTML5＆CSS3单页布局–时尚
New HTML5&CSS3 single page layout – Fashion Our today's template is very light, clean and friend ...
html5超酷单页面,精选10款超酷的HTML5/CSS3菜单
原标题:精选10款超酷的HTML5/CSS3菜单今天向大家精选了10款超酷的HTML5/CSS3菜单,给你的网页添加不一样的精彩,一起来围观一下吧. 1.CSS3手风琴菜单下拉展开带弹性动画利用 ...
h5 默认为移动端页面_html5 移动端H5页面设计尺寸规范
原标题:html5 移动端H5页面设计尺寸规范当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师 ...
表单展示界示例_联系表单页面设计的12个最佳实践（包括示例）
表单展示界示例 Do you want to improve your contact form page design? A good contact form page design encour ...
前端单页面富应用(SPA)的实现
一. 什么是单页面富应用? 单页面应用:Single Page Application 概念:Web应用即使不刷新也在不同的页面间切换,解决浏览器前进.后退等机制被破坏等问题.并且页面访问会被浏览器保 ...
html5 移动页面,html5入门到精通，移动设备的html5页面布局
移动设备的html5页面布局我们结合移动设备(手机和平板电脑)的特性,介绍HTML5中新增的语义化标签元素,以及在移动Web浏览器下Web页面布局的知识及例子. HTML5标准添加的新元素当中,用于 ...
04-前端技术_盒子模型与页面布局
目录三,盒子模型与页面布局 1,网页布局介绍 1.1 固定布局 1.2 流式布局(Liquid Layout) 1.3 栅格化布局 1.4 自适应布局(Adaptive Layout) 1.5 响应 ...
Vue3单页面多布局的实现
之前搞了一下一个vue3的应用,后台的管控界面.昨天来了个需求,要提供一个新的无缝无边框的新页面,给Electron桌面端调用. 原有的管理控制台是SPA,单页面应用,于是首先想到的是vue如何支持多 ...

html5 移动端单页面布局

html5 移动端单页面布局相关推荐

最新文章

热门文章