“小张,角门西地铁站附近有咱们公司班车吗?早上几点啊?”“有吧,具体时间不知道,你要不打师傅电话问问?”“电话多少?”“额,你找找看……”咳咳,还记得那些与班车纠结的日子吗?哈哈,不怕不怕,智慧班车 APP 的诞生已将那种生活停留在过去啦~现在,请拿起手机打开京东 ME –应用—智慧班车 点击进入,即可定制属于自己的班车旅行,班车路线、发车时间、站点查询…一起来体验下吧!

1、 打开 APP — 搜索班车 — 选择班车,查看班车详情,点击关注;

8  12

2、回退至首页可以看到已关注班车,通过下方的推拉按钮查看更加详细信息(包含班车路线、师傅个人信息、班车余位等,可以直接点击联系按钮拨打师傅电话);点击 home icon 添加家庭位置;

2-1  2-2

2-3  2-5

3、点击首页搜索按钮,进入搜索页面(搜索内容包含班车线、站点、地铁);点击首页右侧展开按钮滑出侧边栏,查看更多类目信息(再次点击或者点击左侧白色区域可关闭侧边栏);

3-1 3-2

4、 点击我的班车,可以看到家庭信息(可以删除家庭信息),已关注的班车路线(可以修改默认路线、删除路线);班车路线部分可以选择班车出发地,目前包含总部、朝林广场、北辰、成都、东北、宿迁,班车类型多样(通勤车、摆渡车、加班线班车、培训日班车),是不是很丰富呀,点击感兴趣的路线尽情查看吧~

4-1  4-2

5、站点地图模块显示所选地点通往四面八方的班车,一片京东红有木有~

5-1

6、 总部很大,迷路的小伙伴们有福啦,快点击总部停车场找班车吧!

6-1

以上是简单介绍下智慧班车的使用方法,更多用法等待你去开启。接下来跟大家分享下在项目前端开发过程中遇到的坑点:

公共头部

因为智慧班车 APP 是内嵌到京 ME 中,而且不使用京 ME 的公共头部,所以需要开发一套兼容 Android 、 iOS 手机的头部,效果如下(图 1-1)所示:

1

该头部分为两个部分:状态栏、导航栏/动作栏。状态栏是指高度为 20 个点,显示电池、时间的最顶部的一个窄条;导航栏(/动作栏)是紧接着状态栏的横条,高度为 44 个点,一般用于显示 APP 标题,返回按钮等操作按钮。( PS:  iOS 中高度为 44 点的横条称为导航栏,而 Android 中称为动作栏)。

在 iOS7 之前,状态栏和导航栏是分开的,而从 iOS7 开始状态栏和导航栏交织在一起了,状态栏变为透明,导航栏的高度变为 44+20=64 。因此在开发的时候需要根据手机操作系统的不同分开处理:

头部最外层容器公共样式文件:

这是适用 iOS 操作系统的样式,定义高度为 64px ,包含状态栏和导航栏的高度;对于 Android 系统手机需要做以下处理:修改头部高度为 44px (动作栏高度),上内边距为 0px ,内容区上内边距为 44px 。

手机端查看效果如上图 1-1 所示, PC 端手机调试模式查看效果如下:

iphone6  效果图:

2

Galaxy S5 效果图:

3

点透问题

在项目开发中引入了移动端开发库文件 zepto.min.js ,班车地点选择通过 tap 事件实现,页面中的线路详情区域绑定了 click 事件。当选择班车所在地点时,同时触发了班车路线详情事件,如下图所示。当选择“成都”工作地的班车时,同时也会触发 B6-4 班车路线的详情查看事件,发生了所谓的点透事件。

diantou

首先说一下出现点透事件的场景:当 A/B 两个层上下z轴重叠,B 元素本身有默认的或者绑定了 click 事件,当上层的 A 点击后消失或移开时点击 A/B 重叠的部分,就会出现点透的现象。

发生点透现象是因为 zepto 的 tap 事件是模拟实现的,通过兼听绑定在 document 上的 touch 事件,且 tap 事件是冒泡到 document 上触发的。冒泡到 document 之前,当手指接触屏幕( touchstart )和离开屏幕( touchend )会触发 click 事件,因为该事件有延迟触发,所以在执行完 tap 事件之后,弹出来的选择组件马上就隐藏了,当延迟时间 300ms 到来的时候,如果正下方元素绑定了 click 事件就会触发,出现了上面的点透现象。

解决方法:

(1)引入 fastclick.js ;

(2)对于 B 元素存在默认 click 事件的情况,使用 touchend 代替 tap 事件,并阻止 A 元素 touchend 的默认行为 preventDefault() ,从而阻止 click 事件的产生;

(3)延迟时间(大于 click 延时)来处理事件,结合 fadeInIn/fadeOut 等动画使用,可以做出过渡效果;

(4)考虑到遮罩浮层存在小的延时是可以接受的,直接使用 click 事件。

动画效果

当页面中某个模块需要实现推拉或者滑动的效果时,可能大家的第一反应是通过控制该模块的高度及 overflow scroll 属性实现,实践证明这种做法在手机上滑动时特别卡,为了给用户更好的体验,所以我们采取以下做法:

(1)transform3d 启用硬件加速;

(2)-webkit-overflow-scrolling: touch 启用硬件加速。

 transform3d

  • 坐标轴

transform3d 又称3d 变形,其坐标轴是 x、y、z 三条轴组成的立体空间,x 轴正向、y 轴正向、z 轴正向分别朝向右、下和屏幕外。

3d

  • 变形函数

translate3d() 方法是位移函数中的一种,又称 3d 位移方法,该方法是使一个元素在三维空间移动,translate3d(x,y,z) 其中 x 和 y 可以是长度值,也可以是百分比,百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和,z 只能设置长度值;常用 -webkit-transform: translateZ(0)  来开启硬件加速。

  • 兼容性

transform 是CSS3 中的新属性,因此在使用的时候需要注意兼容性问题,该属性在 PC、Mobile 端的兼容性如下图所示。使用时,需要根据浏览器添加前缀,PC、Mobile 端常用浏览器前缀添加如下表格所示。

jian

 table

推拉操作

下图(图 1 )的底部模块可以上推下拉,该效果通过  transform3d 实现,定义该模块最外层容器类为 container ,获取模块初始高度 initHeight 、计算可滑动最大高度 maxHeight 和模块最小高度 minHeight ,具体做法如下:

(1)上推

首先需要判断该滑动模块是处于展开还是关闭状态,如果是关闭状态,此时上推滑动模块滑动 initHeight ,恢复初始状态,显示班车简要信息;否则,该模块滑动 maxHeight ,显示班车详情信息,如下图(图 2 )所示。

(2)下拉

下拉操作分为两种:关闭班车详情信息,恢复推拉模块初始状态,此时滑动 initHeight 高度;隐藏推拉模块滑动 minHeight 高度。

图 1:

eui

图 2:

la

华硕手机兼容性问题 

联调测试过程中发现,在 X86 芯片的华硕手机上,进入首页后下方不显示班车信息(见下图)。该模块是通过 transform 改变元素的 translateY 值实现的,因此想到是否是该属性的兼容性问题引起。后来发现测试使用的 X86 芯片华硕手机操作系统低于 Android4.4 ,而 transform 适用于 Android4.4 以上,根据 transform 前缀添加表可知低于此版本的在使用时需要加前缀 -webkit ,因此解决方法如下:

huashuo

-webkit-overflow-scrolling

-webkit-overflow-scrolling  属性控制元素在移动设备上是否使用滚动回弹效果。该属性共有两个取值:auto 、touch 。

内部原理:该属性使得页面在 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 实现,该属性将会启动硬件加速。样式代码如下:

在流畅的滑动效果下,硬件加速也有自己的短板。如果 GPU 加载了大量的纹理,就会很容易发生内存问题,这一点在移动端浏览器上尤为明显,所以,一定要牢记不要让页面的每个元素都使用硬件加速。同时使用 GPU 渲染会影响字体的抗锯齿效果。这是因为 GPU 和 CPU 具有不同的渲染机制,即使最终硬件加速停止了,在动画期间文本还是会显示的很模糊。因此对于硬件加速的使用需要根据项目特性、整体呈现效果进行考虑。

该部分最终的动画效果如下图所示:

GIF

总结

在移动端 APP 的开发中,需要适配不同的机型,因此根据不同操作系统分情况处理是必要的;同时可以使用一些 CSS3 新属性实现特定效果开发,如本文中提及的 transform3d 、 -webkit-overflow-scrolling 属性,但需要注意所使用属性的兼容性问题,以更好的实现移动设备上的滚动回弹效果。

开发者

秦伟伟、孙印凤

参考资料

fastclick库:  https://github.com/ftlabs/fastclick

点透事件:http://ariatemplates.com/blog/2014/05/ghost-clicks-in-mobile-browsers/

transform 3d:http://www.w3cplus.com/css3/css3-3d-transform.html

硬件加速原理:http://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

 

喜欢(137) 评论(0) 分享

Leave a Reply

© 2017 JDC. All Rights Reserved.