[Learn AF3]第二章 App Framework 3.0的组件View——AF3的驱动引擎

View：af3中的驱动引擎  

---

组件名称：View

    使用说明：按照官方的说法，view组件是af3的“驱动引擎（driving force）”，view是af3应用的基础，一个app中可以包含一个或多个view，它可以包含一个footer，一个header，可以包含N个panel和sidemenu（drawer），值得注意的是panel（也就是app的页面）需要包裹在class="pages"的div元素之中。

    方法：虽然view看似重要，但是af3并没有把view实现为一个javascript的类，所以也没有view的专属方法。

    事件：没有专属事件，以下是和panel通用的event

panelbeforeload - this event is fired before the panel is transitioned/loaded
panelload  - This event is fired when a panel has been loaded.
panelbeforeunload - this event is fired before the panel is transitioned/unloaded
panelunload  - This event is fired when a panel has been unloaded.

 

    使用：<div class="view"></div>

示意代码：

<div class="view active" id="view1">
    <header>
    </header>
    <div class="pages">
          <div class="panel active">page1</div>
    </div>
</div>

view之间切换默认没有，不过可以在切换anchor中指定，或loadContent函数中设置，详细请看我总结的切换view的三种方式：

1. 编辑时，通过添加active 类名来指定默认view
2. 运行时，通过点击锚定元素来切换：<a href='#viewID' data-transition='slide'>go viewName</a>
3. 运行时，通过js函数loadContent：$.afui.loadContent('#viewID',false,false,'slide'); 此方法同样适用于panel

注： af3中导航历史是基于view的而不是全局的，$.afui.goBack() 不适用于view。

 

---

第一章 如何使用App Framework 3.0 构造应用程序   [Learn AF3系列]