我们开门见山，一起来学习如何进行H5 滑动页面的开发。
一、容器整体滑动（DEMO只演示A-B-C-B，下同）
模拟动画效果见下图(上)，滑动分解见下图(下)：
DEMO地址：
具体实现重点代码解析：
布局方式：父容器相对定位并撑满整个device的viewport，子页面绝对定位并依次并排排列在viewport中（从左到右）
.view-container { // 父容器布局方式
width: 100%;
height: 100%;
padding-top: 44
box-sizing: border-
-webkit-transform: translate3d(0,0,0); //激活GPU 3D加速
-webkit-backface-visibility:
.page-container { // 子页面布局方式
z-index: 1;
left: 0; // 初始化为0，动态计算第N个page，并赋值(N-1)*100%
width: 100%;
height: 100%;
background-color: #F8F8F8;
滑动方式：父容器利用CSS3的动画transform3D进行X轴的滑动(JS控制直接喷到DOM节点中)
-webkit-transform: translate3d(-100%, 0px, 0px); -webkit-transition: 300 transition: 300
二、单个页面滑动
模拟动画效果，见下图：
DEMO地址：
具体实现重点代码解析：
布局方式：父容器高度100%，子容器正常文档流布局（X轴隐藏，Y轴默认原生滚动）
.view-container {
height: 100%;
.page-container {
width: 100%;
min-height: 100%;
overflow-x:
background-color: #F8F8F8;
滑动方式：利用class添加动画样式（keyframes animation），左右进出各一种
@-webkit-keyframes sliderightout{from{-webkit-transform:translateX(0px);opacity:1}to{-webkit-transform:translateX(50%);opacity:0}}
@-webkit-keyframes slideleftin{from{-webkit-transform:translateX(-50%);opacity:0}to{-webkit-transform:translateX(0px);opacity:1}}
@-webkit-keyframes slideleftout{from{-webkit-transform:translateX(0px);opacity:1}to{-webkit-transform:translateX(-50%);opacity:0}}
@-webkit-keyframes sliderightin{from{-webkit-transform:translateX(50%);opacity:0}to{-webkit-transform:translateX(0px);opacity:1}}
.slideleftout{-webkit-animation:slideleftout 350ms ease-in-}
.slideleftin{-webkit-animation:slideleftin 350ms ease-in-}
.sliderightout{-webkit-animation:sliderightout 350ms ease-in-}
.sliderightin{-webkit-animation:sliderightin 350ms ease-in-}
.animatestart{position:top:0;left:0;z-index:3;width:100%;height:100%;overflow-x:hidden}
.animatestart.page-container{overflow-x:-webkit-transform:translate3d(0,0,0);-webkit-backface-visibility:background-color:#f5f5f5}
三、双页联动滑动
模拟动画效果，见下图：
DEMO地址：
具体实现重点代码解析：
布局方式：类似于第一种，父容器和子容器都绝对定位于viewport中，不同点是父类的上级布局更加细分，且大胆使用了webkit-box弹性盒子；子容器没有并排显示，而是重叠隐藏
.view-container {
width: 100%;
height: 100%;
.page-container {
z-index: 1;
bottom: 0;
width: 100%;
height: 100%;
background-color: #F8F8F8;
-webkit-transform:translate3d(0,0,0);
-webkit-backface-visibility:
滑动方式：滑动开始时先将隐藏的下一个子页面拉到viewport右侧与当前子页面平行，然后紧接着两个子页面同步滑动，最后回归样式，中间的时间差事件均有JS控制（详见demo逻辑）
四、三舞台双页视差滑动
模拟动画效果见下图（上），分解逻辑图见下图（下）：
DEMO地址：
布局方式：这里我设定了三舞台(stage)的概念，其实就是当前viewport的左右侧各虚拟一个同样大小的viewport，当然，正常情况下我们只能看到当前舞台的子页面，leftstage是-100%的位置，rightstage是100%的位置，我们分别用三个class来定义：pageOld、pageInit、pageNew来代替
.pageInt {
-webkit-transform: translateX(0);
transform: translateX(0);
.pageOld {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
.pageNew {
-webkit-transform: translateX(100%);
transform: translateX(100%);
滑动方式：
1，定义正向（向左滑）和反向（向右滑）两个概念,；
2，定义快速和慢速两个概念；
则就是四种动态两种组合：正向快速+正向慢速、反向快速+反向慢速；
.slideSlow {
-webkit-transition: -webkit-transform 400ms cubic-bezier(0.42, 0, 0.58, 1.0) 0.1s;
-ms-transition: transform 400ms cubic-bezier(0.42, 0, 0.58, 1.0) 0.1s;
.slideFast {
-webkit-transition: -webkit-transform 300ms cubic-bezier(0.42, 0, 0.58, 1.0);
-ms-transition: transform 300ms cubic-bezier(0.42, 0, 0.58, 1.0);
.slideSlowBack {
-webkit-transition: -webkit-transform 400ms cubic-bezier(0.42, 0, 0.58, 1.0);
-ms-transition: transform 400ms cubic-bezier(0.42, 0, 0.58, 1.0);
.slideFastBack {
-webkit-transition: -webkit-transform 300ms cubic-bezier(0.42, 0, 0.58, 1.0) 0.1s;
-ms-transition: transform 300ms cubic-bezier(0.42, 0, 0.58, 1.0) 0.1s;
其中在三舞台视差滑动中的滑动曲线是经过数次的真机实验后找到的参数（cubic-bezier(0.42, 0, 0.58, 1.0)），这条曲线的滑动形态最接近IOS APP页面的滑动，希望对大家有用。
原文来源于携程UED部门的飞柳
原文地址：/blog/?p=3697
本文标题：
本文地址：/html5css3/8919.html
除非注明，本站文章均为原创或编译，转载请注明出处和原文链接，转载同时请务必保留原网站网址。
移动APP设计入门课程
为你推荐的相关文章
Copyright@
All Rights Reserved ICP备案号：桂ICP备号-2本站声明所有资源均是网上搜集或网友上传提供，如有侵犯您的版权，请及时联系我们（），我们将尽快处理。Swipe-移动前端端触摸滑动插件swipe.js-前端开发博客推荐文章 16192Views 3926Views 2568Views 16947Views 1858Views热门文章
228,132Views
46,461Views
32,660Views
30,287Views
15,091Views
9,435Views对这篇文章不满意吗？百度搜索：");浅谈h5移动端页面的适配问题
时间： 00:55:33
&&&& 阅读：51686
&&&& 评论：
&&&& 收藏：0
标签：一、前言
& & & & 昨天唠叨了哈没用的，今天说点有用的把。先说一下响应式布局吧，我一直认为响应式布局的分项目，一下布局简单得项目做响应式还是可以可以得。例如博客、后台管理系统等。但是有些会认为响应式很牛逼，尤其是在不懂前端的人眼中，一味的追求响应式布局，我觉得复杂的布局项目做响应式还不如做二套样式，因为响应式的样式混在一起真的维护起来是恨费劲的。可能我说的不对，但是发表 一点点自己的看法。说道这里就想说一下移动端的布局，有很多人就是想把手机端得程序兼容ipad，我就觉得这个很不可思议为什么要这么做得，命名手机端的和ipad的设计模式以及操作样式都不一样。为什么还要把它们弄做一起的，维护起来的比较麻烦。还不如做成两套样式或者ipad直接让pc来兼容。pc的设计方式和ipad还是比较接近的。如果非要用移动的样式稍加改成ipad，个人感觉这种方案极不好。不知道大家的看法如何？& & & & 接下来我就说一下布局方式吧，目前比较流行的布局方案就是百分表啦。貌似百分之九十以上得触屏版都是这么做得，这种做法可以说是不会出现什么大问题，但是也会有几个小的问题，例如屏幕大的手机和比屏幕小差距之大，尤其是在比价斤斤计较的设计面前你是无法说清楚的，她会一直问，为什么这两个手机的布局差距这么大呢？其实我想说，我他妈怎么跟你解释呢。。。此处省略1000个字。在就是布局起来也比较麻烦，真心麻烦。当然肯定有更好得方案拉，于似乎我就想出了一个比较好的解决方案，顶宽布局。
二、320定宽布局
& & & & 当时我也想了很多方法，但是一直没有好的解决方案，曾经看了,当时看完哇塞，这不是正式我想要的嘛。可是尝试了多次发现这个方法的兼容性有很大的问题。最后还是放弃拉。于是乎我就开始琢磨，怎么才能更好得兼容所有的机子呢。就想到了缩放，viewport不就干这个的嘛。二话不说就尝试一下viewport里面得一个属性initial-scale,思想很简单，在页面渲染的时候我计算一下手机的宽度，然后我在跟我顶宽布局的宽度一做比较。那么不就可以实现了自动缩放嘛。可是我尝试的结果是，日的，这个属性各个浏览器支持不好。其实我觉得如果这个属性大家都能统一的支持，那就是完美的解决方案拉。可是谁让我们是程序猿呢。只要靠自己吧，要不然jquery也不会诞生。我们就是要在一个个坑中走过来呀。
& & & & &接着就想到了scale哈哈，css3里面得缩放，不过后来发现用这个字体什么的会虚掉。所以想起了zoom属性，从这可以看出来我也是干过pc的，当时的ie6的清楚浮动有一种方式就需要加一个zoom为0，这个就不错嘛。话说回来了。这个在nativeapp里还是没有太大问题得。不过还是有一点小坑，就是计算margin以及scroll的时候就出来个缩放系数的问题。不过还好，只要你把常用的组件写好除以或者乘以这个缩放系数就可以搞定啦哈哈。这种方式就可以解决小伙伴们百分比布局的痛苦拉。尤其是不用去计算那些百分值多少百分值多少拉。废话不说啦，上代码，
1 &!DOCTYPE html&
&meta http-equiv="content-type" content="text/ charset=UTF-8"/&
&meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"&
&meta name="format-detection" content="telephone=no"/&
&title&GreatBoy&/title&
/*-----css Reset end-----*/
body,h1,h2,h3,h4,h5,h6,p,ul,ol,form{
padding:0px;
font-family: "Arial";
font-size: 100%;
margin: 0px auto;
display: none;
width:<span style="background-color: #f5f5f5; color: #px;
margin: 0px auto;
position: relative;
/*-----css content start-----*/
width:<span style="background-color: #f5f5f5; color: #%;
display: block;
&div id="wrapper"&
&div class="nav"&&img src="/banner/75/mobile_app/24326_0.jpg"/&&/div&
&div id="container"&
&div id="user"&用户信息&span id="userinfo"&&/span&&/div&
(function() {
var scale = 1,
$wrapper = document.getElementById(‘wrapper‘),
$body = document.getElementsByTagName(‘body‘)[0],
windowWidth = document.documentElement && document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth,
windowHeight = document.documentElement && document.documentElement.clientHeight || documentElement.body.clientHeight || window.innerHeight,
deviceAgent = navigator.userAgent.toLowerCase(),
setScale = function(scales) {
if ($wrapper.style.zoom === undefined) {
$wrapper.style.margin = ‘0px‘;
$wrapper.style.transformOrigin = ‘top left‘;
$wrapper.style.transform = ‘scale(‘ + scales + ‘)‘;
$wrapper.style.MozTransformOrigin = ‘top left‘;
$wrapper.style.MozTransform = ‘scale(‘ + scales + ‘)‘;
$wrapper.style.zoom =
$body.style.display = ‘block‘;
if (deviceAgent.match(/(iphone|ipod|android|windows\s*phone|symbianos)/)) {
if (window.localStorage && window.localStorage.getItem(‘scale_jumei‘)) {
scale = window.localStorage.getItem(‘scale_jumei‘);
scale = parseFloat(windowWidth / 320);
if (windowHeight & windowWidth) {
window.localStorage && window.localStorage.setItem(‘scale_jumei‘, scale);
//微信2.3版本的处理(2.3版本有一个bug就是获取宽度不准确)
if (deviceAgent.match(/android\s*2.3/) && deviceAgent.match(/micromessenger/)) {
scale = 1;
if ($wrapper) {
setScale(scale);
} catch (e) {
scale = parseFloat(windowWidth / 320);
if ($wrapper) {
setScale(scale);
89 &/html&
& & & & &上面代码很简单大家一看就懂。这种方式做一个简单的页面以及平时做些活动啥得是没问题的。也不需要在算百分比是多少啦，直接写死宽度320布局就好啦，先说一下我得布局方式，就是让设计做640的图片。然后我们布局按照320来做就好，图标什么的让设计出2x图或者3x图，也就是做2倍icon或者3倍icon。2倍的icon目前在6plus上面还是会有点虚得。所以可以选择3倍的icon，毕竟图标什么的也不是太大。说一下这种方法的缺点吧。缺点是有的浏览器不支持zoom属性，例如火狐，那就只能用scale了。还有一个缺点就是在计算某些元素的高度什么需要一个缩放系数的问题。毕竟有缩放的东西在里面。当然坑还是有解决方案的，下面就说一下我的顶宽布局最终解决方案。
三、顶宽布局之最终解决方案
& & & & &为了解决上面布局的坑，我就弄了一个终极的解决方案，这个方案目前肯定也有一定的坑，不过貌似不是很大，毕竟没有太多的人反馈。上面的方案也用了很久，目前没有特别大得问题，尤其是在我们app里面没有出现过重大事故。& & & & 接着说一下最终方案，就是通过font-size缩放，这需要用到一个rem的尺寸，大家没事网上一搜就知道了。这个1rem目前等于16px，那么我上面的320布局岂不是可以搭建成宽度为20rem的尺寸，然后我里面所有的元素都可以用rem来代替px。这样我不就可以通过在html上font-size进行缩放了嘛,其实就是这样做的就ok。这里有一个转换，就是要把css里面的px按照1rem = 16px的规则都替换成rem。这样就ok了。这个方案目前的缺点就是需要编译一下css样式和不允许你写内联样式，不允许写内联样式的主要原因是要不你html也得进行编译替换拉。目前我们得解决方案是在开发的时候我们还是按照320的布局方案来走。等发布到线上的时候做一个整体的gulp构建px替换成rem。于似乎就解决了大部分得问题。目前这个解决方案对我来说还是比较理想的。可能某些地方还有问题。不过也算一种尝试吧，有什么问题大家可以一起解决。好了上一个段代码& & & &&
1 &!DOCTYPE html&
&meta http-equiv="content-type" content="text/ charset=UTF-8"/&
&meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"&
&meta name="format-detection" content="telephone=no"/&
&title&GreatBoy&/title&
/*-----css Reset end-----*/
body,h1,h2,h3,h4,h5,h6,p,ul,ol,form{
padding:0px;
display: none;
width:10rem;
&div class="nav"&&img src="/banner/75/mobile_app/24326_0.jpg"/&&/div&
&div id="container"&
&div id="user"&用户信息&span id="userinfo"&&/span&&/div&
(function(win) {
var doc = win.document,
scale = 16,
$body = doc.getElementsByTagName(‘body‘)[0],
$html = doc.getElementsByTagName(‘html‘)[0],
windowWidth = doc.documentElement && doc.documentElement.clientWidth || doc.body.clientWidth || win.innerWidth,
windowHeight = document.documentElement && document.documentElement.clientHeight || documentElement.body.clientHeight || window.innerHeight,
deviceAgent = navigator.userAgent.toLowerCase();
if ( deviceAgent.match( /(iphone|ipod|ipad|android|windows\s*phone|symbianos)/ ) ) {
if ( window.localStorage && window.localStorage.getItem(‘scale_greatboy‘) ) {
scale = window.localStorage.getItem(‘scale_greatboy‘);
scale = parseFloat(windowWidth * 16 / 320);
if (windowHeight & windowWidth) {
window.localStorage && window.localStorage.setItem(‘scale_greatboy‘, scale);
}catch(e){
if (deviceAgent.match(/android\s*2.3/) && deviceAgent.match(/micromessenger/)) {
scale = 16;
$html.style.fontSize = scale + ‘px‘;
$html.style.display = ‘block‘;
window.onresize = function(){
windowWidth = doc.documentElement && doc.documentElement.clientWidth || doc.body.clientWidth || win.innerW
scale = parseFloat(windowWidth * 16 / 320);
$html.style.fontSize = scale + ‘px‘;
scale = parseFloat(windowWidth * 16 / 320);
$html.style.fontSize = scale + ‘px‘;
$html.style.display = ‘block‘;
$body.style.width = ‘20rem‘;
})(window);
70 &/html&
& & & & 总结一下，这个解决方案目前的缺点。1、css需要编译。2、动态计算的时候一定不要把js里的高度宽什么的写死，一定要动态获取。3、在不支持rem的浏览器上会有问题。 目前这也是我想到的最好得解决方案，由于技术水平比较低哈哈。所以代码质量不高，有什么问题大家可以一起交流讨论，如果上面代码大家有疑惑可以看一下线上的页面原代码，，对啦看淘宝的源代码，貌似淘宝的首页是用fontsize缩放解决的。不过没有看到他们是怎么计算的，有空研究一下。不过我觉得淘宝首页这个自己实现的滚动条还是比较牛，至少在我们公司领导是不允许这么实现的，因为小米3的android机子看了一眼还是会卡顿。。。。太晚了，要去睡觉啦，如果有错别字什么的大家见谅（语文功底比较差哈哈）。
& & & &&标签：
现在什么响应式，什么适配，记得当初的html5，为用不用他而感到发愁，而现在来说，简直火爆的不行啊，像内顶级前端公司切图网（），和电信、路虎、雪佛兰、多美滋等公司合作的项目上千例中，多数都应用到了html5
&&国之画&&&& &&&&chrome插件
版权所有 京ICP备号-2
迷上了代码！云栖社区()为您免费提供js手动轮播相关的问答和话题，同时为你提供等，云栖社区以分享专业、优质、高效的技术为己任，帮助技术人快速成长与发展!H5页面跳转传值问题，怎样在手机浏览器中对已经加载过的页面进行传值？
H5页面跳转传值问题，怎样在手机浏览器中对已经加载过的页面进行传值？
用mui框架开发现在有两个页面 A、B,现在在A页面点击跳转到B页面element.addEventListener('tap',function(){
mui.openWindow({
url: "B.html",
然后现在需要在B页面跳转到A页面，A页面已经加载过，就不能用extras传递参数，需要自定义事件，但是，官网说“仅能在5+ App及流应用中使用，因为是多webview之间传值，故无法在手机浏览器、微信中使用；”那，如果我需要可以在手机浏览器中打开，应该怎样传值？谢谢！
seesion Storage 只是暂时存储，如果当前页面关闭的话就不存在了，其实还有个 local Storage，这是本地存储，你可以参考下；此外你也可以考虑用 location.hash 的方法直接把值打到链接后面，简单直接。然后再用字符串截取或正则表达式的方式拿下来。
有种比较取巧的方案。你可以使用 sessionStorage中转一下。A页面写入，B页面取出，取出完之后删除
Copyright & 2016 phpStudy}