淘宝旅行门票iPad版开发

淘宝旅行门票iPad版开发

Transcript

1. 门票iPad版总结 虎牙
5. Differences ‧ 更大的屏幕 ‧ 更细致的交互 ‧ 更完美的体验 ‧ 更少的兼容性
6. Differences ‧ 更大的屏幕 ‧ 更细致的交互 ‧ 更完美的体验 ‧ 更少的兼容性
7. ‧ 横竖屏切换 ‧ 页面局部刷新 ‧ 历史记录正常 ‧ 滚动加载更多 ‧ 重构组件交互 Details
8. Orientation //横竖屏时更新banner轮播 Orientation.change(function(e) { self.slide.refresh(); }, true);
9. if (useHistoryState) { history.replaceState({ isMapMode: this.isMapMode }, '景点列表', url); this.toggleListMode(true); } else { this.redirectTo(url); } History
10. # 新交互
14. Modules & Extensions
15. Modules & Extensions
16. Modules & Extensions var Search = GlobalBase.extend([ GlobalTMS, GlobalSearch, GlobalCityList, Banner ], {});
17. Modules & Extensions var List = GlobalBase.extend([ GlobalTMS, GlobalSearch, GlobalCityList, ListPopup, ListLoad, ListMap ], {});
18. Modules & Extensions var Scenic = GlobalBase.extend([ Slide, Desc, Map ], {});
19. AOP & SuperBase function ListLoad() {} ! S.augment(ListLoad, { initializer: function() { this.nearScenicName = this.getParam('scenicName'); this.searchByScenic = !!this.nearScenicName; this.doAfter(this.renderListLoad, this, 'renderUI'); this.doAfter(this.bindListLoad, this, 'bindUI'); this.doAfter(this.syncListLoad, this, 'syncUI'); }, destructor: function() {} });
20. AOP & SuperBase function ListLoad() {} ! S.augment(ListLoad, { initializer: function() { this.nearScenicName = this.getParam('scenicName'); this.searchByScenic = !!this.nearScenicName; this.doAfter(this.renderListLoad, this, 'renderUI'); this.doAfter(this.bindListLoad, this, 'bindUI'); this.doAfter(this.syncListLoad, this, 'syncUI'); }, destructor: function() {} });
21. http://gallery.kissyui.com/aop/1.1/guide/index.html http://gallery.kissyui.com/superbase/1.0/guide/index.html AOP & SuperBase
22. Widgets ‧ AOP ‧ SuperBase ‧ Orientation ‧ AlignBox ‧ HistoryList ‧ SimpleSlide ‧ iScroll5 ‧ Scroller ‧ ScrollList ‧ GeoLocation ‧ AutoComplete ‧ and more…
23. # Demo
24. ‧ Zepto to KISSY mini ‧ iScroll4 to iScroll5 ‧ 页面宽度自适应 ‧ 键盘打开时旋转屏幕性能很差 ‧ 页面刷新也会触发onpopstate事件 ‧ 接入淘宝iPad客户端极简支付 Problems
25. zepto 2 mini • Node • Event • UA • Ajax • Lang • duration/timeout • … https://speakerdeck.com/ningzbruc/travel-on-kissy-mini
26. The end.