使用 Famo.us 创建高性能移动 UI（5）将 Famo.us 应用到一个典型的移动应用程序 UI

look_w

将 Famo.us 应用到一个典型的移动应用程序 UI 到目前为止，我们的示例都将 Famo.us 用作一个 3D 呈现库，使用 2D 表面时除外 — 纯粹的对象动画。下一个示例确认了这种组合风格是有效的并且将动画转换应用到移动 UI 的构建上。
图 8 显示了一个常见的移动应用程序布局。导航栏位于顶部，会根据 UI 的状态来激活 "back" 和 "more" 按钮（图 8 中未显示）。底部是一个选项卡栏，其中包含一组切换按钮（可使用 CSS 设置每个按钮的风格），用于选择在内容区域中显示的各个条目。内容区域位于中间，其大小取决于设备的大小。
图 8. 在 Famo.us 中构成移动应用 UI
未包含数据绑定Famo.us 库是一个 UI 创建库，未包含任何数据绑定或模板技术。在移动应用程序示例中，数据源被封装在 DataSource 类中。通过该数据源，可获得文章和视频列表并在 UI 中显示它们。您可在 Famo.us 中使用任何数据访问技术。

通常，应用程序会包含一个较小的条目可滚动列表，让用户可以进一步查看列表。在这个示例应用程序中，您可在 developerWorks 文章列表和开源电影列表之间进行选择。
用户选择某个条目后，内容区域发生变化，以显示所选的条目。可能仅在内容区域中打开此条目（即页眉和页脚仍旧可见），或者它占据整个屏幕（挡住了页眉和页脚）。
试用应用程序在您的移动浏览器中试用一下应用程序：

应用程序启动时，会显示一个文章列表，如图 9 所示。
图 9. 应用程序显示多个 developerWorks 文章如果触摸选项卡栏中的 Videos 按钮，则显示开源电影列表，如图 10 所示。
图 10. 应用程序显示开源视频列表带宽警告在某些设备或浏览器上，选择视频后系统可能会下载整个大文件。

如果触摸列表中的某个视频，则会在内容区域中加载并播放它，如图 11 所示。
图 11. 应用程序播放电影在图 11 中，注意导航栏现在显示一个 back 按钮。如果触摸此按钮，则会再次显示视频列表。再次触摸 Articles 可重新显示文章列表。现在触摸某个文章名称。应用程序会加载并显示所选的文章，如图 12 所示。
图 12. 应用程序显示所选的文章