语言: 英文中文

Ajax Page

我们有了一个有View和Page的应用结构,现在我们需要理解如何创建新的Page,以及Framework7是如何加载他们的。

下面有两个重要的地方请注意:

p 默认情况下 Framework7 会使用 Ajax 加载所有的页面,除了带有 external class的链接(<a href="somepage.html" class="external">)和没有正确 href 值的链接(比如是空的或者是 #)。 p 在 初始化 时候传递不同的 ajaxLinks 参数可以改变这个行为。

所以我们如果需要创建一个链接指向 about.html,我们只需要按照平时一样写 <a>标签就可以:

<a href="about.html">Go to About page</a>

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

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结构。当然这不是强制的,你可以写出完整的页面结构。

多个Page的结构

下面有一个复杂一点的情况。比如,我们有两个 初始化的View。在我们的index文件中:

<body>
  ...
  <!-- Views -->
  <div class="views">
    <!-- Left view -->
    <div class="view view-main left-view">
      <!-- Navbar-->
      <!-- Pages -->
        <a href="about.html"> About </a>
      <!-- Toolbar-->
    </div>
    <!-- Right view -->
    <div class="view right-view">
      <!-- Navbar-->
      <!-- Pages -->
        <a href="about.html"> About </a>
      <!-- Toolbar-->
    </div>          
  </div>
  ...
</body>

如上例所示,我们有两个View,并且她们都有一个链接指向 about.html。并且,我们希望在不同的 View 中跳转到 about.html 页面时显示的是不同的内容。

我们看看这种情况下 about.html 应该是什么样的:

<!-- Left view -->
<div class="view view-main left-view">
  <div class="page" data-page="about-right">
    ... This page will be loaded when you click about.html link from Left view ...
  </div>          
</div>
<!-- Right view -->
<div class="view right-view">
  <div class="page" data-page="about-right">
    ... This page will be loaded when you click about.html link from Right view ...
  </div>          
</div>

最关键的地方是,在 about.html 中的两个view应该和主页中的view有相同的class。这样Framework7就知道应该哪一个page应该放在哪一个view中。

动态导航栏的文件结构

导航栏和工具栏布局类型中,你会看到动态导航栏需要 through-type 布局。但是这种布局类型的工具栏不在Page中,所以我们需要放在放在 about.html 中的正确位置:

<!-- Left view -->
<div class="view view-main left-view">
  <div class="page" data-page="about-right">
    ... This page will be loaded when you click about.html link from Left view ...
  </div>          
</div>
<!-- Right view -->
<div class="view right-view">
  <div class="page" data-page="about-right">
    ... This page will be loaded when you click about.html link from Right view ...
  </div>          
</div> 

这里需要注意的是,page 必须包含在一个和需要跳转的view相同class的view中。这样F7就可以知道需要跳转到哪一个view。

动态导航栏的内部结构

只在 iOS 主题中支持

就像你在 Nabvar & Toolbar 布局类型 中看到的,动态导航栏需要 through-type 布局. 但是这种布局下 navbar 并不在 page 内部。所以我们要这样放:

<div class="navbar">
  ... Navbar content goes here
</div>
 
<div class="page" data-page="about">
  ... About page content goes here
</div>

重点是我们要把 navbar 放在 page 内容旁边。 如果你有多个 page 和 navbar,那么向之前的例子一样把它们放在不同的 view 中。

后退

现在我们知道怎么加载页面了,那么我们要怎么通过相反的动画回到上一个页面呢。

其实很简单,我们只需要给一个链接加上 back 类就行了。下面是 about.html 页面中点击 后退按钮返回 index.html 页面。

<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 属性不是必须得,但是为了向下兼容,最好还是写上。

滑动后退

只在 iOS Theme 中可用

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

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

取消/增加页面切换动画

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

<div class="page" data-page="about">
  <-- Add additional "no-anmation" class to link to diable 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。

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

通过 data 标签配置更多选项

有时候我们希望在某些链接上有更多的配置,我们可以使用作为 data-属性来配置所有在 视图链接方法中的参数,比如:

<!-- Refresh currently active page (reload from server) -->
<a href="about.html" data-reload="true" data-ignore-cache="true">Refresh page</a>
 
<!-- Go back but to another page, not to actual previous page in history. Such method also allows to jump back in history: -->
<a href="about.html" class="back" data-force="true">Back to About</a>
 
<!-- Load new page without animation -->
<a href="about.html" data-animate-pages="false"></a>          

注意这些属性在html中使用的时候是短横线分割,而不是驼峰命名:

  • animatePages - data-animate-pages
  • ignoreCache - data-ignore-cache
  • animatePages - data-animate-pages
  • contextName - data-context-name
  • reloadPrevious - data-reload-previous

用JS加载页面

It is possible to load page from HTML files using JavaScript API, not only using <a> tags. For this case we may use .router.loadPage(url) View Navigation Methods:

可以通过 JS API 加载页面,而不仅仅是只能通过 <a> 标签。这种情况下,我们使用 .router.loadPage(url) 方法,查看更多方法

// Initialize App  
var myApp = new Framework7();
        
// Initialize View          
var mainView = myApp.addView('.view-main')          
        
// Load page from about.html file to main View:
mainView.router.loadPage('about.html');

注意,只有初始化完成的View才可以用此方法

通过 JS 后退

你点击后退链接和直接调用 .router.back() 其实是一样的,查看更多方法:

// Initialize App  
var myApp = new Framework7();
        
// Initialize View          
var mainView = myApp.addView('.view-main')          
        
// Go back on main View
mainView.router.back();

前提是View必须已经初始化完成。

结论

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">),她就会自动变成一个后退链接。

下一步

让我们看看如果做 View 间的链接