m.taobao.com for iPhone&Android Optimization

2,870 views

Published on

m.taobao.com for iPhone&Android Optimization,something about F2E......

Published in: Technology, News & Politics
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,870
On SlideShare
0
From Embeds
0
Number of Embeds
463
Actions
Shares
0
Downloads
19
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

m.taobao.com for iPhone&Android Optimization

  1. 1. 高端版优化总结 张 军
  2. 2. 优化功能点 <ul><li>搜索联想即时反馈 </li></ul><ul><li>筛选和排序优化 </li></ul><ul><li>查看大图功能 </li></ul><ul><li>自定义详情页 </li></ul>
  3. 3. 搜索即时反馈 <ul><li>首页的搜索框 </li></ul><ul><li>顶部搜索 ICON 点开的搜索框 </li></ul>
  4. 4. <ul><li>autocomplete ( on => off ) </li></ul><ul><li>placeholder = “ 请输入搜索内容” </li></ul><ul><li>键盘事件 onkeyup 、 oninput </li></ul><ul><li>处理 keyCode 键值 </li></ul>
  5. 5. autocomplete <ul><li>Var textInput = $('#J-Input'); </li></ul><ul><li>textInput.attr('autocomplete','off'); </li></ul>
  6. 6. palceholder <ul><li>placeholder=&quot; 请输入搜索内容“ </li></ul><ul><li>textInput.focus(function(){ </li></ul><ul><li>if($(this).val() == ''){ </li></ul><ul><li>$(this).val(''); </li></ul><ul><li>} </li></ul><ul><li>}); // 解决 Android Webkit 上的 BUG </li></ul>
  7. 7. onkeyup 、 oninput <ul><li>onkeyup 触发事件,并 ajax 请求数据 </li></ul><ul><li>onchange 与 oninput 的区别 </li></ul><ul><li>(oninput 时时触发, ie 用 onpropertychange) </li></ul>
  8. 8. Keycode 键值 <ul><li>空格 32 </li></ul><ul><li>Enter 13 </li></ul><ul><li>if(e.keyCode==13 || e.keyCode==32) return; </li></ul>
  9. 9. 关于 Android 焦点框
  10. 10. 关于 Android 焦点框 <ul><li><div class=&quot;wrap&quot;> </li></ul><ul><li><ul> </li></ul><ul><li><li rel=“href&quot;><img src=&quot;img&quot; alt=“&quot; /></li> </li></ul><ul><li> <li rel=“href&quot;><img src=&quot;img&quot; alt=“&quot; /></li> </li></ul><ul><li> <li rel=“href&quot;><img src=&quot;img&quot; alt=“&quot; /></li> </li></ul><ul><li></ul> </li></ul><ul><li></div> </li></ul>
  11. 11. 关于 Android 焦点框 <ul><li>if(navigator.userAgent.match(/iPhone/i)) {  // 如果是 iPhone </li></ul><ul><li>       $(&quot;#J_Slide .wrap li&quot;).each(function(){ </li></ul><ul><li>              var url = $(this).attr('rel'); </li></ul><ul><li>              $(this).find('img').wrap('<a href=&quot;+ url +&quot;></a>'); </li></ul><ul><li>       }); </li></ul><ul><li>}else{ </li></ul><ul><li>       $('#J_Slide .wrap li').bind('touchend',function(){ </li></ul><ul><li>            var url = $(this).attr('rel'); </li></ul><ul><li>            location.href = url; </li></ul><ul><li>            return false; </li></ul><ul><li>      }); </li></ul><ul><li>} </li></ul>
  12. 12. 筛选和排序优化 <ul><li>修改分类筛选方式 </li></ul><ul><li>优化高级搜索 </li></ul><ul><li>增加按地区筛选 </li></ul>
  13. 13. <ul><li>List 点击区域优化 </li></ul><ul><li>优化 <label> </li></ul><ul><li>地区筛选 繁 -> 简 </li></ul>
  14. 14. List 点击区域 <ul><li><li> 标签样式不要使用 margin </li></ul><ul><li>使用 display:table 、 display:table-cell ,替代 </li></ul><ul><li>display:block </li></ul>
  15. 15. 优化 <label> <ul><li><li> </li></ul><ul><li><label for=&quot;mall&quot; onClick=&quot;&quot;> </li></ul><ul><li> <input type=“checkbox” id=“mall” /> 商城宝贝 </li></ul><ul><li></label> </li></ul><ul><li></li> </li></ul><ul><li>label {display:block;} </li></ul>
  16. 16. 地区筛选 繁 -> 简 <ul><li>去掉 border-radius 、 box-shadow 、 background:-webkit-gradient... </li></ul><ul><li>去掉 animation 动画 </li></ul>
  17. 17. 查看大图功能 <ul><li>启动大图浏览模式 </li></ul><ul><li>大图模式支持图片拖动功能 </li></ul><ul><li>支持查看原始尺寸图片 </li></ul>
  18. 18. <ul><li>Click 、 touch 事件 </li></ul><ul><li>设置标识,处理当前状态下的图片样式、链接 </li></ul><ul><li>图片大小处理(图片尺寸有限 160×160 , 310×310 ) </li></ul>
  19. 19. Slide 的原理
  20. 20. Slide - html <ul><li><div class=&quot;gallery&quot; id=&quot;J_Gallery&quot;> </li></ul><ul><li><div class=&quot;wrap&quot;> </li></ul><ul><li><ul class=&quot;holder&quot;> </li></ul><ul><li> <li class=&quot;loading&quot;><img src=“…./loading.gif&quot; alt=&quot; 加载中 &quot; /> 加载中,请稍候… </li> </li></ul><ul><li></ul> </li></ul><ul><li></div> </li></ul><ul><li><div class=&quot;switch-nav&quot;> </div> </li></ul><ul><li></div> </li></ul>
  21. 21. Slide - css <ul><li>.wrap{ </li></ul><ul><li>overflow: hidden; </li></ul><ul><li>} </li></ul><ul><li>.wrap ul{ position: absolute;left:0;top:0; </li></ul><ul><li>} </li></ul><ul><li>.wrap ul li{ float:left; </li></ul><ul><li>} </li></ul>
  22. 22. Slide – 获取宽度 <ul><li>var touch = $(‘#J_Gallery’) .find(‘. holder’). ; </li></ul><ul><li>Var wrapWidth = $(‘#J_Gallery’) find(‘. wrap’). width(); // 得到每次滑动的宽度 </li></ul><ul><li>for(var i=0;i<$(‘# J_Gallery’) .find(‘li’).size();i++) { </li></ul><ul><li>width += child.eq(i).width(); </li></ul><ul><li>} </li></ul><ul><li>touch.width(width); // 得到 touch 层的宽度 </li></ul>
  23. 23. Slide – 获取动作当前坐标 <ul><li>function getClient(e){ // 获取 touch 事件 event 对象的 clientX </li></ul><ul><li>var coors = 0; </li></ul><ul><li> if (e. changedTouches ){ //iPhone 多根手指情况 </li></ul><ul><li> coors = e.changedTouches[0].clientX; </li></ul><ul><li> else{ </li></ul><ul><li>coors = e.clientY; </li></ul><ul><li>} </li></ul><ul><li>return coors; </li></ul><ul><li>} </li></ul>
  24. 24. Slide – 拖动事件 <ul><li>touch[0]. ontouchstart = startDrag; </li></ul><ul><li>function startDrag(e){ </li></ul><ul><li> var pos = [touch.position(). left , touch.position(). top ]; </li></ul><ul><li> var startPoint = getClient(e); //touch 开始点 </li></ul><ul><li>…… </li></ul><ul><li>touch[0]. ontouchmove = moveDrag; </li></ul><ul><li>touch[0]. ontouchend = endDrag; </li></ul><ul><li>return false; </li></ul><ul><li>} </li></ul>
  25. 25. Slide – 拖动事件 <ul><li>function moveDrag(e){ </li></ul><ul><li> var currentPos = getClient(e); </li></ul><ul><li> var newPos = (currentPos - startPoint) + pos[0]; </li></ul><ul><li> touch[0].style.left = newPos + 'px'; </li></ul><ul><li>} </li></ul>
  26. 26. Slide – 拖动事件 <ul><li>function endDrag(e){ </li></ul><ul><li> var endPoint = getClient(e); </li></ul><ul><li> var dist = endPoint - startPoint; </li></ul><ul><li> if(dist < 0){ </li></ul><ul><li> next(); // 下一张 </li></ul><ul><li>}else{ </li></ul><ul><li> prev(); // 上一张 </li></ul><ul><li>} </li></ul>
  27. 27. 自定义详情页 <ul><li>自定义详情页增加图片展示 </li></ul><ul><li>…… </li></ul>
  28. 28. 沟 通 pd 开发 SCM 交互 视觉 前 端
  29. 29. 谢 谢!

×