内联页面 (DOM 缓存)

优质

小牛编辑

174浏览

2023-12-01

通过这种方式，你可以把所有的页面都放到 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">)，它就会变成一个返回上一个链接