移动端交互优化

Posted 孙倩倩

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端交互优化相关的知识,希望对你有一定的参考价值。

1、移动web页面上click事件响应有300ms延迟

原因:移动设备访问的web页面都是PC上的页面。在默认viewport(980px)的页面往往需要“双击”或“捏开”放大页面。而正是为了确认用户是“双击”还是“单击”。

safari 需要300ms 的延迟来判断。而后来的iphone,android也沿用这样的设计。

举例:如果你点击一下,在300ms内再点击第二次就认为是双击事件。

1.1) 如何解决?

    利用tap事件代替click 

自定义tap事件原理:

    在touchstart、touchend时记录时间、手指位置,在touchend时进行比较,如果手机位置为同一位置(或允许移动一个非常熊德位移值)且时间间隔较短(一般认为是200ms)

过程中未曾触发过touchmove。即可认为触发了手持设备上的“click”,一般称它为“tap”.(一般使用zepto.js框架)

1.2)问题: Tap “点透”的bug;描述: 点击按钮最上面的蒙层,但是蒙层下的按钮也会触发。

点透发生过程:  touchstart , touchend蒙层消失, 此时由于300ms导致下面的click触发

关于tap 穿透的解决方案:

    ①使用缓动动画,过渡300ms的延迟。

    ② 中间层dom元素的加入,让中间接受这个“穿透”事件

    ③ “上下”都使用tap事件,原理上解决tap 透传事件(但不可避免原生标签的click事件)

    ④ 改用fastclick的库(听过最新的zepto已经fixed掉这个bug)

 

2、tap事件为自定义事件,基于touch基础事件。

2.1)触摸才是移动设备的交互核心事件。

        touchstart: 手指触摸屏幕触发(已经有手指放屏幕上不会触发)

        touchmove: 手指在屏幕上滑动,连续触发

        touchend: 手指离开屏幕时触发

        touchcancel:系统取消touch时候触发(不常用)

2.2)除了常见的事件属性外,触摸事件包含专有的触摸属性。

       touches: 跟踪触摸操作的touch对象数组。

        targetTouches: 特定事件目标的touch对象数组;

        changeTouches: 上次触摸改变的touch 对象数组

2.3)每个touch对象包含属性--根据touch对象跟踪触摸具体位置,从而判断触摸交互或手势事件

       clientX: 触摸目标在视口中的X坐标,clientY

       pageX: 触摸目标在页面中的X坐标(包含滚动),pageY

       screenX:触摸目标在屏幕中的X坐标,screenY

       target: 触摸的DOM节点目标

       identifier: 标识触摸的唯一ID

2.4) Android 4.0,4.1,4.4只会触发一次touchstart,一次touchmove,touchend不触发

解决方案: 在touchmove中加入:event.preventDefault()---------touchmove多次触发,touchend 结束触发

导致问题: 默认行为不发生,如:scroll,导致页面不滚动

 

2.5)常用touch相关的交互效果

    ① 弹性滚动

     当客户端的页面滚动到顶部或底部时候,滚动条会收缩并让我们多滑动一定距离。通过缓冲反弹的效果,带给用户良好的体验。

 但滚动有几种情况:

    1、body层滚动:自带弹性滚动,overflow: hidden 失效,gif和定时器暂停

    2、局部滚动:没有弹性滚动,没有滚动惯性,不流畅

     如何开启?  body { overflow: scroll;-webkit-overflow-scrolling: touch; }

注意: Android不支持原生的弹性滚动,但是可以借助第三方库iScroll来实现

    ② 下拉刷新

    ③ 上拉加载:使用scroll事件,而不是touch事件

 

以上是关于移动端交互优化的主要内容,如果未能解决你的问题,请参考以下文章

移动端网站的HTML5前端性能优化指南

echart移动端优化

移动端网站如何优化,移动端网站HTML5前端性能优化指南

移动端按钮交互变色实

移动端兼容

移动端触屏接触交互区域的接触