Framewrok7 视图介绍（views、view）使用介绍

二、视图的创建与初始化

1，html页面中定义视图

假设我们要做一个包含两个模块（即两个视图 View）的应用，主页代码结果如下：

  ...
 

2，初始化视图

前面我们已经在 html 中创建好了需要的 view，接下来还要 JavaScript 中初始化我们的 view
var myApp = new Framework7({
  // ...
}); 
 
/* 初始化视图 */
var mainView = myApp.addView('.view-main', {
  dynamicNavbar: true
})
var anotherView = myApp.addView('.another-view');

三、视图的访问与使用

1，View 的方法和属性
View 实例有很多有用的方法可以用来操作自身。上面样例中，我们将两个视图初始化后的实例分别保存在 mainView 和 anotherView 这两个变量中。下面以 mainView 为例来看看这些方法和参数。
属性(Properties)
mainView.params 初始化参数，你可以读取或者重写某些属性，
比如 mainView.params.linksView = '.another-view'
mainView.history 返回一个包含所有历史的字符串数组，其中每一个字符串都是一个页面的URL
mainView.contentCache 返回被缓存的页面。只有当内容是动态生成的时候才可以使用这个属性。
mainView.url 当前页面的URL
mainView.pagesContainer 当前的pagesHTML元素
mainView.activePage 当前页面对应的Page Data
mainView.main 当前页面是否是 main view
mainView.router router对象，有很多路由相关的方法
Methods
mainView.router.load(options) Read more about it in Router API
mainView.router.back(options) Read more about it in Router API
mainView.hideNavbar() 在当前View中隐藏导航栏
mainView.showNavbar() 在当前View中显示导航栏
mainView.hideToolbar() 在当前View中隐藏工具栏
mainView.showToolbar() 在当前View中显示工具栏
mainView.destroy() 销毁初始化过的View，解除事件绑定，禁用浏览导航

2，获取当前视图实例

有时我们需要获取到当前的活动视图，或者是作为弹出窗口、弹出面板等等的视图。可以使用 myApp.getCurrentView() 方法即可。
比如在一个面板（panel）中初始化一个视图 View，同时这个 panel 当前也是打开的，那么用这个方法就会得到这个 View。
同样的，如果我们是使用标签栏布局（tab bar layout），这个方法就会得到当前激活标签对应的视图。
（1）如果只有一个活动视图

var currentView = myApp.getCurrentView();

（2）如果当前有多个活动视图（比如 Split View 布局），就要加个索引参数。

myApp.getCurrentView(index)

3，通过HTML元素来获取视图View实例

当我们初始化完成 View 之后，Framework7 会在元素上增加一个属性以便让我们可以通过 JS 来访问。

var viewsElement = $$('.view-main')[0];
var viewInstance = viewsElement.f7View;

4，获取所有的视图实例
所有的 view 实例也都存储在一个应用实例的 views 属性中，比如我们可以这样找到 main view
for (var i = 0; i < myApp.views.length; i ++) {
  var view = myApp.views[i];
  if (view.main) myApp.alert('I found main View!')
}