View 间链接和跳转

优质

小牛编辑

124浏览

2023-12-01

让我们看一种更复杂一点的情况

我们有两个已经初始化完成的View（left view 和 right view)。这种情况下，所有在left view 中的链接加载的页面都会放在 left view 中，所有在right view中的链接加载的页面都会放在 right view中。

但是我们现在需要一些在 left view 中的链接加载的页面放进 right view中。这叫 View间链接。我们已经知道可以通过JS来实现，通过 .router.load() 和 .router.back()方法。

Framework7 可以让我们不使用JS来实现，所有需要做的只是在连接上增加一个 data-view 属性，这个属性包含一个CSS选择器指向需要放入的那个View即可。

<body>
  ...
  <!-- Views -->
  <div class="views">
    <!-- Left view -->
    <div class="view view-main left-view">
      <!-- Pages -->
      
        <!-- These links will load pages to this Left view -->
        <a href="about.html"> About </a>
        <a href="services.html"> Services </a>
        
        <!-- This link will load pages to Right view -->
        <a href="products.html" data-view=".right-view"> Products </a>
    </div>
    <!-- Right view -->
    <div class="view right-view">
      <!-- Pages -->
      
        <!-- These links will load pages to this Right view -->
        <a href="products.html"> Products </a>
        <a href="contacts.html"> Contacts </a>
        
        <!-- This link will load pages to Left view -->
        <a href="about.html" data-view=".left-view"> About </a>
        <a href="services.html" data-view=".left-view"> Services </a>
        
        <!-- This link will trigger Go Back in Left view -->
        <a href="#" class="back" data-view=".left-view"> About </a>
    </div>          
  </div>
  ...
</body>

你可以参考这个例子 Split View Application example

下一步

我们已经有了完整的页面结构，下一步就是使用组件。首先从最重要的组件开始，导航栏和工具栏