Framework7(05: Page,路由,页面刷新)

2023年6月23日 324次阅读 来源: 廖马儿

1.路由器 JS API

Framework7 中的路由器使用非常灵活，他可以有多种方式来处理Page:

  • Ajax Pages,从一个指定的URL 加载页面，通常是另外一个页面的文件地址（默认行为）。
  • 通过JS API 创建和加载 动态页面
  • 如果你的页面已经写在DOM中了，那么你可以直接使用 内联页面 ，而不用再去加载。
  • 可以加载使用 Template7 编写的模板
  • 可以在你的应用中混合使用所有上面的这些方法。

视图是应用中的一个独立部分，她有自己的设置、页面切换和浏览历史。路由器也是初始化之后的视图(View)中的一部分，所以你使用路由器之前必须要记得先初始化视图（使用myApp.addView()方法）

2.视图中页面切换相关方法：

在视图中主要有两个路由器方法:

  • mainView.router.load(options) – 把一个页面加载到当前视图
  • mainView.router.back(options) – 这个方法会触发一个反向的动画并回到上一个页面，也就是浏览历史上的回退

上面这些方法都接受一个options对象作为参数，这个参数有很多属性。url， content， context 等等。

3.视图中页面切换的快捷方式

  • 加载新页面的方法:
    mainView.router.loadPage(url)– 加载指定的页面到视图中。其实和你在页面中点击一个链接是一样的效果。
    url – 需要加载的页面的URL
    mainView.router.loadContent(content)– 把动态生成的内容当做一个页面加载.
    content - string or HTMLElement or [jQuery/Zepto/DOM7 collection] or [array of HTMLElement] – 需要加载的内容

4.重新加载当前页面的方法:

  • mainView.router.reloadPage(url) – 重新加载指定的页面到视图的当前页面。同时也会修改视图的浏览历史，把最后一条记录替换成指定的URL。
    url – 需要加载页面的URL
  • mainView.router.reloadContent(content)– 重新加载指定的内容到视图的当前页面。同时也会修改视图的浏览历史，把最后一条记录替换成指定的URL。
    content - string or HTMLElement or [jQuery/Zepto/DOM7 collection] or [array of HTMLElement]– 需要加载的内容

5.重新加载上一个页面的方法（如果视图的DOM中有两个页面）：

  • mainView.router.reloadPreviousPage(url)– r重新加载指定的页面到视图的上一个页面。同时也会修改视图的浏览历史，把最后一条记录替换成指定的URL。

  • mainView.router.reloadPreviousContent(content) – 重新加载指定的内容到视图的上一个页面。同时也会修改视图的浏览历史，把最后一条记录替换成指定的URL。

6.刷新页面的方法:

  • mainView.router.refreshPage() – 刷新视图的当前页面。和你调用.reloadPage
    方法并且传入当前页面的URL是一样的效果
  • mainView.router.refreshPreviousPage() – 刷新视图的上一个页面。和你调用.reloadPreviousPage
    方法并且传入上一个页面的URL是一样的效果

7.Ajax页面
默认情况下 Framework7 会使用 Ajax 加载所有的页面，除了带有 external class的链接（<a href="somepage.html" class="external">）和没有正确 href 值的链接（比如是空的或者是 #）。

在 初始化 时候传递不同的 ajaxLinks 参数可以改变这个行为。

所以我们如果需要创建一个链接指向 about.html，我们只需要按照平时一样写 <a>标签就可以：
<a href="about.html">Go to About page</a>

当我们点击这个链接的时候，Framework7会通过Ajax获取 about.html，解析它的内容，然后把它插入到DOM中，并且做一个动画切换到这个新页面。

  1. Page 内部的结构

因为Framework7有一个非常聪明的解析器，所以在内部页面中我们不需要完整的HTML结构（head,body,views,pages等)。比如 about.html的内容：

<!-- That is all we have in about.html file -->
<div class="page" data-page="about">
     ... About page content goes here
</div>

重点是，Framework7解析器会尝试在ajax加载的页面中寻找 <div class="page">，所以我们不需要完整的HTML结构。当然这不是强制的，你可以写出完整的页面结构。

9.多个Page的结构

两个view应该和主页中的view有相同的class。这样Framework7就知道应该哪一个page应该放在哪一个view中。

10.动态导航栏的文件结构

nav回退，

<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>

关于后退链接几个需要注意的地方：

  • 如果在浏览历史中有页面，Framework7会忽略掉 href 属性中的值。
  • 如果在浏览历史中没有页面（比如你在首页点了后退），Framework7会加载href属性指定的url。你无法改变上述行为。

对后退链接来说， href 属性不是必须得，但是为了向下兼容，最好还是写上。

11.滑动后退(iOS only)

如果你启用了 “swipeBackPage” 应用参数，那么你可以通过从左向右滑动来后退到上一个页面。但是有时候你会想在某些页面中禁用这个行为，这种情况下你只需要加一个 no-swipeback class 即可。

<div class="page no-swipeback">
     ...
</div>

12.取消/增加页面切换动画

有时候你在加载页面或者后退的时候需要立刻执行，不想要一个切换的动画效果，可以通过增加一个 “no-animation” class 在链接上即可。

div class="page" data-page="about"> 
    <!-- Add additional "no-anmation" class to link to disable animated page transition --> 
   <a href="about.html" class="no-animation"> 
        Load About page immediately 
   </a>
   <!-- The same rule for back link --> 
   <a href="index.html" class="back no-animation"> 
        Go back immediately 
   </a>
</div>

如果我们已经全局禁用了动画，但是在某些链接上希望启用这些动画，那么我们可以给链接加上 “with-animation” class。

13.通过 data 标签配置更多选项

有时候我们希望在某些链接上有更多的配置，我们可以使用作为data-属性来配置所有在 视图链接方法中的参数。
<a href="about.html" data-reload="true" data-ignore-cache="true">Refresh page</a>

14.用javascript加载page，和回退page
略

15.结论

Framework7 中，页面之间的链接和路由都是很简单的，你只需要记住：

  • 你需要使用普通的 <a>标签，她有一个href属性指向你需要加载的页面。
  • 通过ajax加载的页面不需要有完整的HTML结构。只需要有 <div class="page"> (和 <div class="navbar"> 如果你需要动态的滚动条)
  • 如果你在同一个文件中有多个Page，把他们用 <div class="view"> 包裹起来，并且给每一个View设置好正确的class。
  • 只需给一个链接加上 back class (<a href="index.html" class="back">)，她就会自动变成一个后退链接。
    原文作者：廖马儿
    原文地址: https://www.jianshu.com/p/fe27770090f3
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞