昨天已经预告了今天的主题：webapp结构布局实现方案

大家在使用app中，经常会进行各种操作，实现不同的功能间切换，可以看到不同的内容。各种内容之间切换，会通过各种动画，比如从左到右、从右到左、从上到下、从下到上、透明到不透明、缩小放大等效果。

如果大家多了解些，也许和我一样也知道native app的视图view概念。原生app通过控制视图实现内容的展现和切换，以及app的内存管理。

在手机上webapp，怎么能够模拟原生webapp的实现效果呢？

如果在进行某个操作的时候，采用最简单的加载网页，可以吗？

很明显，这样做，会导致页面刷新，出现闪屏，而且无法控制页面的原始位置，继而无法实现动画效果。

那么，你可以在app store搜索“上海房税”。看看这个webapp是否接近原生app的效果。欢迎体验。

现在进入主要环节，webapp之结构布局实现方案：

大家仔细看这个大图：

大家看出端倪了吧？

在webapp和native app中，都是有默认视图，我们这里认为是“1”。当app启动时候，用户就能够看到“1”。如果用户进行操作，就可以把“2”、“3”、“4”、“5”的内容通过动画从各自的位置移动到2所在位置，这样就可以避免页面闪动等问题。

当然，具体实现的时候，还有某些细节。

我主要列举下一下原则，供大家参考。
1：所有的模块通过如图的样式和位置布局；
2：所有的模块是平级的，都包括在一个父容器中，父容器相对或者绝对定位，模块都按照绝对定位，当然也可以相对定位，但必须都保持一致；
3：父容器位置是从“1”的左上角开始，也就是“2”模块位置，是left：320px，top：0；“3”模块位置，left:-320px,top:0;“4”模块位置，left：0，top：460px；“5”模块位置，top:-320px,left:0;(已iphone 4s为例，其他的原理一致)
4：此外，需要对各个模块，标注z-index值，显示不同的层级。避免模块在“1”区域出现的层级，避免被遮盖。

此外，还有一些罩层，都是在“1”区域，但是默认hidden的，需要的时候显示即可。

大家有什么细节问题，回复即可。我基本在线的