一：页面路由
Framework7的页面之间跳转有4种方法：
- 异步加载：从一个指定的URL加载页面，通常是另外一个页面的文件地址（默认行为）【常用】
- JS：创建和加载动态页面(html字符串拼接成的页面内容)【不常用】
- 内联页面：在index.html中将所有的page加载进来，在view中直接通过名字进行跳转。【常用】
- 使用模版：Framework7可以定义文件模版，可以通过调用模版并传值生成页面并且加载进来。【高阶用法】
二：异步加载
1）页面跳转
用<a>标签创建一个链接指向页面文件，当点击这个链接的时候，Framework7会通过Ajax获取文件，解析它的内容，然后把它插入到DOM中，并且做一个动画切换到这个新页面。如：
<a href="about.html">Go to About page</a>
2）后退：使用back类标签
<div class="page" data-page="about"> <!-- Just add additional "back" class to link --> <a href="index.html" class="back"> Go back to home page </a> </div>
3）ios有滑动后退动作，可以设置或关闭它
4）关闭切换动画：为了提升切换效率，可以使用no-animation类关闭切换动画
<a href="about.html" class="no-animation"> Load About page immediately </a>
5）通过 data-XX 进行更多配置，其中 XX 参数主要有：
| 参数 | 类型 | 说明 |
|---|---|---|
| url | string | 需要加载的页面的URL |
| content | string or HTMLElement or [jQuery/Zepto/DOM7 collection] or [array of HTMLElement] | 需要加载的动态页面的内容 |
| pageName | string | 需要加载的页面的名称(data-page)。只用在内联页面(DOM cached)。 |
| template | function (Template7 compiled template) | 需要加载并渲染的模板 |
| context | object or array | 渲染Template7 模板时需要的上下文。这里有更多说明Template7 Pages。 |
| contextName | string | 可选的。用来渲染 Template7 的 templatesData 的上下文名称/路径。这里查看更多说明 Template7 Pages |
| query | object | Object with additionall query parameters that could be retreived in queryobject of Page Data |
| force | boolean | 可选的。只对 back 方法有效。如果设置为 true，那么会忽略浏览历史中的上一个页面，而是直接加载指定的页面。 |
| ignoreCache | boolean | 可选的。如果设置为 true ，那么会忽略URL对应的缓存，并且再次通过XHR来加载。 |
| animatePages | boolean | 可选的。可以覆盖在 View 中的相同参数，打开/关闭页面切换的动画。 |
| reload | boolean | 可选的。如果设置为 true，那么不会当做新页面加载，而是直接替换当前视图的当前页面。并且在视图浏览历史中替换最后一条历史。 |
| reloadPrevious | boolean | 可选的。和 reload 一样，不过是对上一个页面。 |
| pushState | boolean | 可选的。是否把浏览历史存储在浏览器的浏览历史中。(这样可以使用浏览器的后退/前进按钮） |
注意， url, content, pageName, template 这四个参数，你只能同时使用一个。
6）在js中加载页面
view.router.loadPage(‘页面.html‘);
7）在js中后退
view.router.back();
三：加载动态页面
1）在js中加载动态页面
我们可以在js文件中，通过拼接html字符串来创建、加载动态页面。
// 1:HTML Content of new page:
var newPageContent = ‘<div class="page" data-page="my-page">‘ +
‘<div class="page-content">‘ +
‘<p>Here comes new page</p>‘ +
‘</div>‘ +
‘</div>‘;
//2:Load new content as new page
view.router.loadContent(newPageContent);
2）在js中创建页面内容多有不便，我们也可以在index.html的script标签间创建动态page，然后在js中通过id选择器动态加载它。
创建动态page：
<script type="text/template" id="myPage">
<div class="navbar">
<div class="navbar-inner">
<div class="center">My Page</div>
</div>
</div>
<div class="page" data-page="my-page">
<div class="page-content">
<p>Here comes page content</p>
</div>
</div>
</script>
加载动态page：
view.router.loadContent($(‘#myPage‘).html());
四：内联页面(DOM缓存)
1）启用DOM缓存功能
DOM缓存可以将所有页面都加载、缓存起来，然后在dom中就可以直接通过名字、id等选择器来操作页面了。
var mainView = myApp.addView(‘.view-main‘, {
domCache: true //启用dom缓存
});
2）在index.html中加载所有页面（page被加载到view容器中，加了 cached类 的page被缓存，不加的被渲染呈现）
<html>
<head>...</head>
<body>
...
<!-- Views -->
<div class="views">
<!-- View -->
<div class="view view-main">
<!-- Pages -->
<div class="pages">
<!-- Home page -->
<div class="page" data-page="index">
<div class="page-content">
<p>Home page</p>
</div>
</div>
<!-- About page -->
<div class="page cached" data-page="about">
<div class="page-content">
<p>About page</p>
</div>
</div>
<!-- Services page -->
<div class="page cached" data-page="services">
<div class="page-content">
<p>Services page</p>
</div>
</div>
</div>
</div>
</div>
...
</body>
</html>
3）跳转至内联页面：通过 #pageName
<a href="#about">Go to About page</a>
4）返回上一页内联页面：加 back 类。
<a href="#index" class="back"> Go back to home page </a>
5）js中跳转至内联页面
view.router.load({pageName: ‘pageName‘});
五：模版文件的使用（略）
原文地址：https://www.cnblogs.com/ygj0930/p/8445687.html
时间： 2024-10-11 13:56:40