语言: 英文中文

内联页面 (DOM 缓存)

通过这种方式,你可以把所有的页面都放到 DOM 中,不需要在通过Ajax或者动态创建来加载他们。

启用内联页面

默认情况下,内联页面功能是禁用的。如果你想启用,只需要给视图传入一个 domCache: true 参数即可:

var mainView = myApp.addView('.view-main', {
    domCache: true //enable inline pages
});

内联新页面结构

就像我们上面说的,当应用加载的时候你的所有页面都已经在index文件的DOM中了。下面是index文件的结构:

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

就像你看到的那样,它几乎和 普通的App布局 一样,唯一不同的是,我们已经有了所有的页面,并且那些附加的页面都有一个额外的 cached 类。

所有的附加页面(非当前显示的页面)都应该有一个额外的 cached

有动态导航栏的内敛页面的结构

Structure with Dynamic Navbar is supported only in iOS Theme

导航栏和工具栏布局 中说到,动态导航栏需要穿透布局。但是在这里,导航栏不是在页面中的。

所以我们需要增加一些 navbar inners:

<html>
  <head>...</head>
  <body>
    ...
    <!-- Views -->
    <div class="views">
      <!-- View -->
      <div class="view view-main">
 
        <!-- Navbar -->
        <div class="navbar">
          <!-- Home page navbar -->
          <div class="navbar-inner" data-page="index">
            <div class="center">Home</div>
          </div>
 
          <!-- About page navbar -->
          <div class="navbar-inner cached" data-page="about">
            <div class="center">About</div>
          </div>
 
          <!-- Services page navbar -->
          <div class="navbar-inner cached" data-page="services">
            <div class="center">Services</div>
          </div>
        </div>
 
        <!-- Pages -->
        <div class="pages navbar-through">
          <!-- 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>          
  • 所有的附加(不是当前显示的) navbar-inner 都应该有一个 cached

  • 当时在内联页面中使用动态导航栏时,每一个相关的 "navbar-inner" 都应该有一个对应的 data-page 属性。

内联页面的URL

现在,当我们写好了页面结构和内联页面之后,我们需要创建链接来指向这些内联页面

内联页面的URL遵循这个规则: #{{pageName}},其中 {{pageName}} 是需要加载的页面的名称 (data-name 属性)

假设我们想加载 "about" 页面,我们需要这样写链接:

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

返回上一页

这个和 Ajax Pages 完全一样,唯一不同的是页面的URL。我们所要做的仅仅是在链接上增加一个 back 类:

<div class="page" data-page="about">
  <!-- Just add additional "back" class to link -->
  <a href="#index" class="back"> Go back to home page </a>
</div>

使用JS加载内联页面

除了使用 <a> 标签,还可以通过JS加载内联页面。这种情况下,我们使用 router.load() 方法 View Navigation Methods

// Initialize App  
var myApp = new Framework7();
        
// Initialize View          
var mainView = myApp.addView('.view-main')          
        
// Load about page:
mainView.router.load({pageName: 'about'});

注意,只有视图初始化之后才行哦。

使用JS返回上一页

通过JS调用 .router.back()(View Navigation Methods) 方法就可以返回上一页,和你点 "back" 链接是一样的效果

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

当然,你也必须先初始化view

总结

就像你看到的这样,页面间的链接和跳转是很简单的。你只需要记住这些:

  • 你可以使用 <a> 标签,只需要在 href 属性上写入需要加载的页面的 #{{pageName}}

  • 可以直接给一个链接加上 "back" 类 (<a href="#index" class="back">),它就会变成一个返回上一个链接