“小张，角门西地铁站附近有咱们公司班车吗？早上几点啊？”“有吧，具体时间不知道，你要不打师傅电话问问？”“电话多少？”“额，你找找看……”咳咳，还记得那些与班车纠结的日子吗？哈哈，不怕不怕，智慧班车 APP 的诞生已将那种生活停留在过去啦~现在，请拿起手机打开京东 ME –应用—智慧班车 点击进入，即可定制属于自己的班车旅行，班车路线、发车时间、站点查询…一起来体验下吧！
1、 打开 APP — 搜索班车 — 选择班车，查看班车详情，点击关注；
2、回退至首页可以看到已关注班车，通过下方的推拉按钮查看更加详细信息（包含班车路线、师傅个人信息、班车余位等，可以直接点击联系按钮拨打师傅电话）；点击 home icon 添加家庭位置；
3、点击首页搜索按钮，进入搜索页面（搜索内容包含班车线、站点、地铁）；点击首页右侧展开按钮滑出侧边栏，查看更多类目信息（再次点击或者点击左侧白色区域可关闭侧边栏）；
4、 点击我的班车，可以看到家庭信息（可以删除家庭信息），已关注的班车路线（可以修改默认路线、删除路线）；班车路线部分可以选择班车出发地，目前包含总部、朝林广场、北辰、成都、东北、宿迁，班车类型多样（通勤车、摆渡车、加班线班车、培训日班车），是不是很丰富呀，点击感兴趣的路线尽情查看吧~
5、站点地图模块显示所选地点通往四面八方的班车，一片京东红有木有~
6、 总部很大，迷路的小伙伴们有福啦，快点击总部停车场找班车吧！
以上是简单介绍下智慧班车的使用方法，更多用法等待你去开启。接下来跟大家分享下在项目前端开发过程中遇到的坑点：
公共头部
因为智慧班车 APP 是内嵌到京 ME 中，而且不使用京 ME 的公共头部，所以需要开发一套兼容 Android 、 iOS 手机的头部，效果如下（图 1-1）所示：
该头部分为两个部分：状态栏、导航栏/动作栏。状态栏是指高度为 20 个点，显示电池、时间的最顶部的一个窄条；导航栏（/动作栏）是紧接着状态栏的横条，高度为 44 个点，一般用于显示 APP 标题，返回按钮等操作按钮。（ PS： iOS 中高度为 44 点的横条称为导航栏，而 Android 中称为动作栏）。
在 iOS7 之前，状态栏和导航栏是分开的，而从 iOS7 开始状态栏和导航栏交织在一起了，状态栏变为透明，导航栏的高度变为 44+20=64 。因此在开发的时候需要根据手机操作系统的不同分开处理：
头部最外层容器公共样式文件：
1
2
3
4
5
6
7
8
9
.header-back{
position: fixed;
width: 100%;
height: 64px;
line-height: 44px;
padding: 20px.2rem0.2rem;
background: #f23030;
z-index: 15;
}
这是适用 iOS 操作系统的样式，定义高度为 64px ，包含状态栏和导航栏的高度；对于 Android 系统手机需要做以下处理：修改头部高度为 44px （动作栏高度），上内边距为 0px ，内容区上内边距为 44px 。
1
2
3
4
5
6
7
8
9
/*判断Android or ios*/
varu= navigator.userAgent;
varisAndroid= u.indexOf('Android')> -1|| u.indexOf('Adr')> -1;//android终端
if(isAndroid){
$('.header-back').css({'padding':'0 .2rem','height':'44px'});
$('.container').css('padding-top','44px');
}else{
$('.container').css('padding-top','64px');
}
手机端查看效果如上图 1-1 所示， PC 端手机调试模式查看效果如下：
iphone6 效果图：
Galaxy S5 效果图:
点透问题
在项目开发中引入了移动端开发库文件 zepto.min.js ，班车地点选择通过 tap 事件实现，页面中的线路详情区域绑定了 click 事件。当选择班车所在地点时，同时触发了班车路线详情事件，如下图所示。当选择“成都”工作地的班车时，同时也会触发 B6-4 班车路线的详情查看事件，发生了所谓的点透事件。
首先说一下出现点透事件的场景：当 A/B 两个层上下z轴重叠，B 元素本身有默认的或者绑定了 click 事件，当上层的 A 点击后消失或移开时点击 A/B 重叠的部分，就会出现点透的现象。
发生点透现象是因为 zepto 的 tap 事件是模拟实现的，通过兼听绑定在 document 上的 touch 事件，且 tap 事件是冒泡到 document 上触发的。冒泡到 document 之前，当手指接触屏幕（ touchstart ）和离开屏幕（ touchend ）会触发 click 事件，因为该事件有延迟触发，所以在执行完 tap 事件之后，弹出来的选择组件马上就隐藏了，当延迟时间 300ms 到来的时候，如果正下方元素绑定了 click 事件就会触发，出现了上面的点透现象。
解决方法：
（1）引入 fastclick.js ；
1
2
3
4
5
6
7
8
9
< type="text/java"src="../../js/libs/fastclick.min.js"></>
< type="text/java">
$(function(){
FastClick.attach(document.body);
})
$("#aa").click(function(){
//很多处理比如隐藏什么的
});
</>
（2）对于 B 元素存在默认 click 事件的情况，使用 touchend 代替 tap 事件，并阻止 A 元素 touchend 的默认行为 preventDefault() ，从而阻止 click 事件的产生；
1
2
3
4
5
6
< type="text/java">
$("#aa").on("touchend",function(event){
//很多处理比如隐藏什么的
event.preventDefault();
});
</>
（3）延迟时间(大于 click 延时)来处理事件，结合 fadeInIn/fadeOut 等动画使用，可以做出过渡效果；
1
2
3
4
5
6
7
< type="text/java">
$("#aa").on("tap",function(event){
setTimeout(function(){
//很多处理比如隐藏什么的
},310);
});
</>
（4）考虑到遮罩浮层存在小的延时是可以接受的，直接使用 click 事件。
动画效果
当页面中某个模块需要实现推拉或者滑动的效果时，可能大家的第一反应是通过控制该模块的高度及 overflow scroll 属性实现，实践证明这种做法在手机上滑动时特别卡，为了给用户更好的体验，所以我们采取以下做法：
（1）transform3d 启用硬件加速；
（2）-webkit-overflow-scrolling: touch 启用硬件加速。
transform3d
坐标轴
transform3d 又称3d 变形，其坐标轴是 x、y、z 三条轴组成的立体空间，x 轴正向、y 轴正向、z 轴正向分别朝向右、下和屏幕外。
变形函数
translate3d() 方法是位移函数中的一种，又称 3d 位移方法，该方法是使一个元素在三维空间移动，translate3d(x,y,z) 其中 x 和 y 可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和，z 只能设置长度值；常用 -webkit-transform: translateZ(0) 来开启硬件加速。
兼容性
transform 是CSS3 中的新属性，因此在使用的时候需要注意兼容性问题，该属性在 PC、Mobile 端的兼容性如下图所示。使用时，需要根据浏览器添加前缀，PC、Mobile 端常用浏览器前缀添加如下表格所示。
推拉操作
下图（图 1 ）的底部模块可以上推下拉，该效果通过 transform3d 实现，定义该模块最外层容器类为 container ，获取模块初始高度 initHeight 、计算可滑动最大高度 maxHeight 和模块最小高度 minHeight ，具体做法如下：
1
2
3
varinitHeight= $('.top-module').height();
varmaxHeight= $(window).height()-$('.header-back').height();
varminHeight= $('.top-module').find('.top').height();
（1）上推
首先需要判断该滑动模块是处于展开还是关闭状态，如果是关闭状态，此时上推滑动模块滑动 initHeight ，恢复初始状态，显示班车简要信息；否则，该模块滑动 maxHeight ，显示班车详情信息，如下图（图 2 ）所示。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
if($(container).hasClass(closeClass)){
$(container).removeClass(closeClass);
$(container).animate({'transform':'translate3d(0,-'+initHeight+'px,0)',
'-webkit-transform':'translate3d(0,-'+initHeight+'px,0)'},
{duration:500,complete:function(){}},'ease-out');
}else{
if(isLineShow){
$('.line-infor').show();
}else{
$('.line-infor').hide();
}
$(container).addClass(openClass);
$(container).animate({'transform':'translate3d(0,-'+maxHeight+'px,0)',
'-webkit-transform':'translate3d(0,-'+maxHeight+'px,0)'},
{duration:500,complete:function(){}},'ease-out');
}
（2）下拉
下拉操作分为两种：关闭班车详情信息，恢复推拉模块初始状态，此时滑动 initHeight 高度；隐藏推拉模块滑动 minHeight 高度。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
if($(container).hasClass(openClass)){
$(container).animate({'transform':'translate3d(0,-'+initHeight+'px,0)',
'-webkit-transform':'translate3d(0,-'+initHeight+'px,0)'},
{duration:500,complete:function(){
$(container).removeClass(openClass);
$('.line-infor').show();
}},'ease-out');
}else{
$(container).animate({'transform':'translate3d(0,-'+minHeight+'px,0)',
'-webkit-transform':'translate3d(0,-'+minHeight+'px,0)'},
{duration:500,complete:function(){
$(container).removeClass(openClass).addClass(closeClass);
}},'ease-out');
}
图 1：
图 2：
华硕手机兼容性问题
联调测试过程中发现，在 X86 芯片的华硕手机上，进入首页后下方不显示班车信息（见下图）。该模块是通过 transform 改变元素的 translateY 值实现的，因此想到是否是该属性的兼容性问题引起。后来发现测试使用的 X86 芯片华硕手机操作系统低于 Android4.4 ，而 transform 适用于 Android4.4 以上，根据 transform 前缀添加表可知低于此版本的在使用时需要加前缀 -webkit ，因此解决方法如下：
1
2
3
$(container).animate({'transform':'translate3d(0,-'+initHeight+'px,0)',
'-webkit-transform':'translate3d(0,-'+initHeight+'px,0)'},
{duration:500,complete:function(){}},'ease-out');
-webkit-overflow-scrolling
-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果。该属性共有两个取值：auto 、touch 。
1
2
3
-webkit-overflow-scrolling: touch;/* 当手指从触摸屏上移开，会保持一段时间的滚动 */
-webkit-overflow-scrolling: auto;/* 当手指从触摸屏上移开，滚动会立即停止 */
内部原理：该属性使得页面在 Native 端滚动时模拟原生的弹性滚动效果，当滑动区域使用属性 -webkit-overflow-scrolling: touch 后，当手指滑动区域时会发现回弹效果以及滚动得很快，这是因为对于有 -webkit-overflow-scrolling 的网页，会创建一个继承自 UIScrollView 的 UIWebOverflowScrollView ，作为渲染模块提供给子 layer ；还会创建一个作为 ContentView 的子 View ，是给 WebCore 真正用作渲染 overflow 型内容的 layer 容器，这些需要 WebCore 有硬件加速的支持才有实际意义。因此该属性创建了带有硬件加速的系统级控件，但是该属性会相对耗费更多内存，适用于含有大面积 overflow 的容器。
滑动操作
当中间的路线站点总高度大于设定高度时将会出现滚动条，如上图（图 2 ）中间班车路线部分所示。为了减少滑动的卡顿，该部分最外层容器设置 overflow: auto ，使用属性 -webkit-overflow-scrolling: touch 实现，该属性将会启动硬件加速。样式代码如下：
1
2
3
4
5
6
7
8
9
.info-list-wrap{
position:relative;
overflow:auto;
transform:translate3d(0,0,0);
-webkit-transform:translate3d(0,0,0);
padding-top: 0.3rem;
overflow-scrolling: touch;
-webkit-overflow-scrolling: touch;
}
在流畅的滑动效果下，硬件加速也有自己的短板。如果 GPU 加载了大量的纹理，就会很容易发生内存问题，这一点在移动端浏览器上尤为明显，所以，一定要牢记不要让页面的每个元素都使用硬件加速。同时使用 GPU 渲染会影响字体的抗锯齿效果。这是因为 GPU 和 CPU 具有不同的渲染机制，即使最终硬件加速停止了，在动画期间文本还是会显示的很模糊。因此对于硬件加速的使用需要根据项目特性、整体呈现效果进行考虑。
该部分最终的动画效果如下图所示：
总结
在移动端 APP 的开发中，需要适配不同的机型，因此根据不同操作系统分情况处理是必要的；同时可以使用一些 CSS3 新属性实现特定效果开发，如本文中提及的 transform3d 、 -webkit-overflow-scrolling 属性，但需要注意所使用属性的兼容性问题，以更好的实现移动设备上的滚动回弹效果。
开发者
秦伟伟、孙印凤
参考资料
fastclick库: https://github.com/ftlabs/fastclick
点透事件：https://ariatemplates.com/blog/2014/05/ghost-clicks-in-mobile-browsers/
transform 3d：https://www.w3cplus.com/css3/css3-3d-transform.html
硬件加速原理：https://www.w3cplus.com/css3/introduction-to-hardware-acceleration-css-animations.html
-webkit-overflow-scrolling： https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-overflow-scrolling
标签： 安卓版巴士
评论列表
3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 if($(container).hasClass(closeClass)){ $(container).removeClass(closeClass); $(contai
择“成都”工作地的班车时，同时也会触发 B6-4 班车路线的详情查看事件，发生了所谓的点透事件。 首先说一下出现点透事件的场景：当 A/B 两个层上下z轴重叠，B 元素本身有默认的或者绑定了 click 事件，当上层的 A 点击后消失或移开时点