视图(views)
View (<div class="view">) - 在应用中是一个独立的部分，她有自己的设置、页面切换和历史。每一个视图都可以有不同的导航栏、工具栏布局和不同的样式。所以View就像是嵌在应用中的另一个应用。这种功能可以让你来分别操作一个应用中的不同部分。
Views (<div class="views">) - 是所有可见View的容器（不包括Modal和Panel）。Views 是你的应用主容器。一个应用中只能有一个 Views
下面是 Views 的HTML结构：
<body> ... <div class="panel panel-left panel-cover"> <div class="view panel-view"> ... </div> </div> <!-- Views --> <div class="views"> <!-- Your main view --> <div class="view view-main"> <!-- Navbar--> <!-- Pages --> <!-- Toolbar--> </div> <!-- Another view --> <div class="view another-view"> <!-- Navbar--> <!-- Pages --> <!-- Toolbar--> </div> </div> <div class="popup"> <div class="view popup-view"> ... </div> </div> ... </body>
View 可以放在应用中的任何位置，但是有一个重要的规则 - 所有的可见 View 都应该放在 Views (<div class="views">)中。因为我们会用来做页面切换的动画。
Main View
主视图会有一个 view-main 的class，因为我们会默认把所有的链接加载的页面放进主视图中。 并且，你使用 pushState hash navigation 的时候也是只在主视图中工作。
初始化View
在我们的HTML中已经有需要的 view，并且应用已经初始化了，现在我们需要在JavaScript中初始化我们的 view。
注意不是所有的view都需要初始化，只有你需要浏览的那些view才需要。其他的view（比如 popup）不需要初始化，我们仅仅用来正确的布局navbar，pages和toolbars。
在之前的文章中我们把应用初始化的实例存放在 myApp 变量中。
var myApp = new Framework7({
// ...
});
这个实例有很多方法可以操作我们的应用，其中一个方法就可以用来初始化View。
myApp.addView(selector, parameters) - initialize View.
- container - string or HTMLElement. If string - CSS selector of View element
- parameters - object. Object with View parameters
- This method returns object with just created View instance.
View initialization parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
| dynamicNavbar | boolean | false | 在当前View中是否使用动态导航栏iOS theme only |
| url | string | undefined | View 默认的 url，如果没有定义，则就是当前文件的路径 |
| domCache | boolean | false | 如果设置为true，则所有上一步的页面都不会从DOM中被删除。有的时候这个设置会很有用，比如你有一个表单有5步操作，你想从第5步访问第一步的页面的时候。 |
| linksView | string / View instance | undefined | 另一个View的CSS选择器，默认情况下，所有的链接都会被加载到当前的页面。可以指定讲当前view中链接加载到另一个View中。 |
| Navigation | |||
| uniqueHistory | boolean | Set to true and App will keep View's navigation history unique, it will also remove duplicated pages. By default, equal to the same App's parameter. Allows to override global App parameter for current View | |
| uniqueHistoryIgnoreGetParameters | boolean | false | Use this parameter in addition to uniqueHistory. Set to true and App will ignore URL GET parameters when cheking its uniqueness. So the URLs like "page.html" and "page.html?id=3" will be treated as the same. By default, equal to the same App's parameter. Allows to override global App parameter for current View |
| allowDuplicateUrls | boolean | You may enable this parameter to allow loading of new pages that have same url as currently "active" page in View. By default, equal to the same App's parameter. Allows to override global App parameter for current View | |
| animatePages | boolean | 如果你想在页面切换时禁用动画，可以把这个值设置为false。默认和 App中对应的参数值相同，可以用来在当前View中重置全局的App 参数。 | |
| preloadPreviousPage | boolean | 打开/关闭预加载下一页。为了“返回上一步”能正常工作，最好打开这个选项。默认情况下和 App 中的设置相同。 | |
| reloadPages | boolean | false | 启用这个功能之后，所有的页面都会直接在View中reload，而不是加载一个新的页面。 |
| preroute | function(view, options) | - | This callback allows to prevent default router load/back actions and to load another page or do another required actions. Allows to override the same App callback but for the current View Example |
| preprocess | function(content, url, next) | - | This callback function allows you to modify loaded by router (mostly Ajax) content right before it will be injected to DOM. Callback receives "content" and "url" of the loaded page and the "next" callback function. Allows to override the same App callback but for the current View Example |
| 滑动返回上一步(iOS theme only) | |||
| swipeBackPage | boolean | 默认和app中对应的参数相同。可以在当前View中重置App参数 | |
| swipeBackPageThreshold | number | 默认和app中对应的参数相同。可以在当前View中重置App参数 | |
| swipeBackPageActiveArea | number | 默认和app中对应的参数相同。可以在当前View中重置App参数 | |
| swipeBackPageAnimateShadow | boolean | By default, equal to the same App's parameter. Allows to override the same App parameter but for the current View | |
| swipeBackPageAnimateOpacity | boolean | 默认和app中对应的参数相同。可以在当前View中重置App参数 | |
| 回调函数(Callbacks)(iOS theme only) | |||
| onSwipeBackMove(callbackData) | function | 在滑动返回的时候会调用. callbackData 有下面这些属性:
| |
| onSwipeBackBeforeChange(callbackData) | function | Callback function that will be executed right before swipe back animation to previous page when you release it. | |
| onSwipeBackAfterChange(callbackData) | function | Callback function that will be executed after swipe back animation to previous page when you release it. | |
| onSwipeBackBeforeReset(callbackData) | function | Callback function that will be executed right before swipe back animation to current page when you release it. | |
| onSwipeBackAfterReset(callbackData) | function | Callback function that will be executed after swipe back animation to current page when you release it. | |
Now when we know all required parameters we can initialize our views according to HTML example above:
var myApp = new Framework7({
// ...
});
/* Initialize views */
var mainView = myApp.addView('.view-main', {
dynamicNavbar: true
})
var anotherView = myApp.addView('.another-view');
这个例子中我们没有初始化在 panel 和 popup 中的view，因为我们不需浏览他们。但是如果你需要浏览这些，你就需要初始化他们。
View 的方法和属性
就像上面的例子一样，我们初始化 view 之后，会把他们的实例存储在变量 mainView 和 anotherView 中。View 实例有很多有用的方法可以用来操作自身。下面我们以 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，解除事件绑定，禁用浏览导航 |
View 事件
这些事件只有在 iOS 主题中才有
| Event | Target | Description |
|---|---|---|
| swipeBackMove | View Element<div class="view"> | 滑动返回上一页的时候触发此事件 |
| swipeBackBeforeChange | View Element<div class="view"> | Event will be triggered right before swipe back animation to previous page when you release it |
| swipeBackAfterChange | View Element<div class="view"> | Event will be triggered after swipe back animation to previous page when you release it |
| swipeBackBeforeReset | View Element<div class="view"> | Event will be triggered right before swipe back animation to current page when you release it |
| swipeBackAfterReset | View Element<div class="view"> | Event will be triggered after swipe back animation to current page when you release it |
Default View URL
If you think that for some reason Framework7 detects wrong default View URL (which is used for navigation history), or if you want to have different default View URL, you can specify it using data-url attribute on View element or using url parameter when you initialze View:
<div class="view" data-url="index2.html">
Get Current View
There could be situation when we need to get currently active View, because instead of main app view we may also have view in opened popup, popover, opened panel, tabs, etc. This method allows to get the View instance of currently active/visible/"most-top" view.
For example, if you have initilized View in panel, and panel is currently opened, then this method will return panel's view. Or, if you use app with tab bar layout, where each tab is view, then this method will return currently active/visible tab-view
myApp.getCurrentView(index) - get currently active/visible View instance
- index - number - If there are few currently active views (as in Split View layout), then you need to specify index number of View. Optional
- Method returns initialized View instance or array with View instances if there are few currently active views
通过其他方式来访问View实例
有时候你需要通过HTML元素来获取View实例。当我们初始化完成View之后，Framework7会在<div class="view">元素上增加一个属性以便让我们可以通过JS来访问。
var viewsElement = $$('.view-main')[0];
var viewInstance = viewsElement.f7View;
当然，所有的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!')
}