2015AC前端大会笔记

开发眼中的前端交互——by Weber

        移动web开发 VS PC web开发

a.      M: HTML——关注meta标签，定制移动web开发的行为和样式

b.      V：CSS——屏幕分辨率适配

c.      C: JavaScript——交互优化&性能优化

 

性能优化——更快：压缩代码、文件合并、后台直出等方法切实改变响应速度

交互优化——更好用：通过替换方案改变用户感知到的相应速度，结合移动设备特点提供更有针对性更好用的体验。

 

移动web会对click事件进行300ms的延迟。是为了区分单击双击，因为移动端要用双击来进行放大缩小，做分辨率兼容。

 

Zepto框架，tap事件代替click，tap事件不是原生事件，用touchstart、touchmove、touchend模拟的。解决300ms的延迟。

基本要求：

   1. 从触摸到离开时间间隔短；    

   2. 从起点到终点的距离小。

 

点击态：给用户明确的点击反馈，提升用户体验

方案1：使用:active伪类

缺点：滚动的时候也会触发样式。

 

方案2：

 

//点击事件带点击态
$el.on('tap',function(e)){
   var $target = $(e.target);
   $target.addClass('active');
   setTimeout(function(){
      $target.removeClass('active');
  },500);
});

滚动：

1.      全局滚动：滚动条在body节点或更顶层

2.      局部滚动：滚动条在body下的某一个dom节点上

iOS：

全局滚动：默认支持

局部滚动：默认没有滚动条，且滑动起来干涩

局部滚动使用弹性滚动效果：

body{
   -webkit-overflow-scrolling:touch;
}
/*局部滚动的dom节点*/
.scroll-el{
   overflow:auto
}

建议：将属性挂在body上，可以避免很多奇怪的bug。

 

Android：

定制版本较多，表现各异

默认没有弹性滚动效果

-webkit-overflow-scrolling默认浏览器不支持

Android版chrome支持

 

什么情况下会触发出界：
iOS

全局滚动：滚动到页面顶部（或底部）时继续向下（向上）滑动，就会出现

局部滚动：滚动到页面顶部（或底部）时，手指离开停下，再继续向下（向上）滑动，就会出现。

解决方案：

局部滚动：使用ScrollFix

if(startTopScroll <=0){
   elem.scrollTop =1;
};
if(startTopScroll +elem.offsetHeight >=elem.scrollHeight){
    elem.scrollTop = elem.scrollHeight - elem.offsetHeight-1;
};

局部滚动：页面的固定区域禁止touchmove默认事件

全局滚动：暂无，改成局部滚动。从iOS8开始Safari的出界部分的背景色和body的背景色保持一致。

 

Android下使用局部滚动，会导致滚动条显示异常，且滚动不流畅，建议只使用全局滚动。

流畅滚动的N条军规

1.      body上加上-webkit-overflow-scrolling:touch

2.      iOS尽量使用局部滚动

3.      iOS引进ScrollFiex避免出界

4.      Android下尽量使用全局滚动

        尽量不用overfl：auto

        使用min-height:100%代替height：100%

5.      iOS下带有滚动条且position:absolute的节点不要设置其背景色。

键盘定制：

<input type="number" />
   <input type="tel" />
   <input type="search"/> <!--1.设置type="search"2.用一个form表单包围起来3.在onsubmit事件里面阻止默认行为-->
<inputtype="text" pattern="[0-9]*"/>  <!--pattern属性规范文本框只能输入什么内容，其他pattern属性值并不支持-->

 

定制软键盘行为：

配置input节点的autocapitalize、autocorrect属性。Autocapitalize=“off”关闭首字母大写。

 

IOS：基本支持

Android：不同系统版本不同定制版本支持情况不一样