淘宝本地生活应用-移动web开发总结

-webkit-transition:background 0.3s ease; 

 

1.js库的选择：

 

方案1：原生js（适用在页面和js等文件，在服务器端，原生的js体积小，性能高）；

方案2：kissy（适用于在页面和js等文件和应用一起打包，本地文件无性能问题）；

方案3：zepto\jquery mobile\jqmoblie 等移动端轻量级库（封装了移动端的touch等相关事件，是最优选择）；

(zepto:http://zeptojs.com/ )

 

 

2.touch和click事件的恩恩怨怨

 

• 不能简单用touchstart或者touchend来替代click，因为当滚动页面的时候，也是需要touch的，无法区分
• 使用click会出现绑定点击区域闪一下的情况，解决：给该元素一个样式如下

  -webkit-tap-highlight-color: rgba(0,0,0,0);

• 如果不使用click，也不能简单的用touchstart或touchend替代，需要用touchstart的模拟一个click事件，并且不能发生touchmove事件，或者用zepto中的tap（轻击）事件。

 

 

3.动画（transition）

该属性是对样式变化的监听，当监听对象为all，即所有属性的时候，会有性能问题，如果不必要，最好选定。

-webkit-transition:background 0.3s ease; 

 

4.背景渐变：

background:-webkit-linear-gradient(#e8e8e8,white,white,white,white,white,white,white,#e8e8e8);

 或者

background:-webkit-gradient(linear, 
						100% 20%, 
						100% 100%,
						color-stop(0.14,rgb(235,235,235)),
						color-stop(0.8,rgb(224,224,224))
						);

 

5.旋转

-webkit-transform:rotate(0deg);