移动前端单页面制作的一些思考

一.路由

场景是,webview单页面,url不会变化。

两个标识,页面自己的路由标识,当前路由状态。

进入到某页面,当前路由状态更新为某页面标识。

有一张路由表,监听回退事件。

一旦回退,依据路由表和当前路由状态,找到页面,触发该页面的回退事件。

路由标识名字建议,grandfather-father-son这种命名方式。

二.过场动画 

因为,通过translate的页面覆盖,是以DOM结构顺序为标准(而不是以z-index),后面的DOM覆盖前面的DOM。

所以,你从页面a切换到页面b的时候,得把b的dom移到a的后面。 

dom位置变化后,紧接着加上位移动画的class,是不会产生动画。请用setTimeout延迟。

总结顺序,更新当前路由状态->移除之前过场动画->调整dom位置->延迟执行过场动画。

三.一些小技巧(20141024)

1.点透或触摸延迟300ms,如果你的业务只有点点点,用fastclick;有左滑右滑之类,用成熟的触摸库来tap。

用fastclick,将难以保持触摸元素时的css样式的变化,比如:active,:hover。

2.禁止屏幕滚动,除了那个,还有设置body高度为一屏高。

3.html模板,可以ajax txt方式请求html代码,自己写model,view model,control来实现类MVVM的易维护代码。

原文地址:https://www.cnblogs.com/samwu/p/4042007.html