返回 导航

HTML5 / CSS3

hangge.com

Framewrok7 - 视图介绍（views、view）

作者：hangge | 2016-09-15 09:41

一、Views 与View的介绍
1，Views (<div class="views">) 
（1）Views 是应用主容器。一个应用中只能有一个 Views。
（2）同时 Views 也是是所有可见 View 的容器（不包括 Modal 和 Panel）。

2，View(<div class="view">)
（1）View 在应用中是一个独立的部分，它有自己的设置、页面切换和历史。
（2）每一个视图都可以有不同的导航栏、工具栏布局和不同的样式。所以 View 就像是嵌在应用中的另一个应用。这种功能可以让你来分别操作一个应用中的不同部分。
（3）View 可以放在应用中的任何位置，但是有一个重要的规则 - 所有的可见 View 都应该放在 Views (<div class="views">)中。因为我们会用来做页面切换的动画。


二、视图的创建与初始化
1，html页面中定义视图
假设我们要做一个包含两个模块（即两个视图 View）的应用，主页代码结果如下： 
<body>
  ...
  <div class="panel panel-left panel-cover">
    <div class="view panel-view"> ... </div>
  </div>
  <!-- Views -->
  <div class="views">
    <!-- 主视图（main view） -->
    <div class="view view-main">
      <!-- Navbar-->
      <!-- Pages -->
      <!-- Toolbar-->
    </div>
    <!-- 另一个视图 -->
    <div class="view another-view">
      <!-- Navbar-->
      <!-- Pages -->
      <!-- Toolbar-->
    </div>          
  </div>
  <div class="popup">
    <div class="view popup-view"> ... </div>
  </div>
  ...
</body>

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!')
}
评论

全部评论（0）

回到顶部