知识整理
- 实现思路整理，切图，实现
- 测试：浏览器模拟-rundev后生成特定链接>容器测试
- /去掉a标签或btn点击阴影效果/
a { -webkit-tap-highlight-color: rgba(0,0,0,0); } - swiper 实现手机滑动
swiper = new Swiper('.swiper-container', { speed: 1000, initialSlide: 0, lazyLoading: true, direction: 'vertical', shortSwipes:'true', onTouchMove: function() { } }); - h5 页面能不用js尽量不用（各种错）
- 测试时不能用内测版支付宝测试（一个坑）
手机适配
- @media screen and (max-device-height: 480px) {} //iphone 4
- @media screen and (min-device-height: 481px) and (max-device-height: 568px) {}//iphone 5
- @media screen and (min-device-height: 569px) {}//iphone 6
- @media screen and (min- 414px) and (min-device-height: 668px) { /6plus/
zepto 模块
- zepto包含部分核心模块，其他模块如animate、touch需要引入对应模块js实现。
问题总结
- （旋转，掉落，横向移动）js动画效果跟css动画效果冲突，鱼和熊掌不可兼得，纯js实现动画效果效率太低、耗资源量大，不适合于手机端；纯css实现动画效果随机变化不好控。
- iphone 4兼容效果比较差，有些变量X%不响应，需要设置固定值（如480px）
- android 小蛋糕不显示 固定值不识别，要用%值。
- 在不同的环境显示效果不同（钱包活动一定在钱包测，uc浏览器测试iPhone4显示效果不对）
- 加载依赖出错（npm包错误，重新下载安装）
- json数据中key值多打了一个空格，a链接一直跳转到本页（跳转错误）
动画实现及优化
移动端提高动画效率：http://blog.sina.com.cn/s/blog_3f1fc8950102v0un.html
浏览器实现移动端高性能css3动画(开启gpu加速)http://www.jb51.net/css/125615.html
CSS3 Transitions, Transforms和Animation使用简介与应用展示http://www.zhangxinxu.com/wordpress/2010/11/css3-transitions-transforms%E5%92%8Canimation%E4%BD%BF%E7%94%A8%E7%AE%80%E4%BB%8B%E4%B8%8E%E5%BA%94%E7%94%A8%E5%B1%95%E7%A4%BA/
学习资料
无线前端开发经验集：http://www.atatech.org/articles/27393
调试：https://www.cnblogs.com/xy-nb/p/web.html