Framework7跳转页面如何自动隐藏工具栏(no-tabbar)

最新推荐文章于 2025-05-11 15:41:41 发布

原创最新推荐文章于 2025-05-11 15:41:41 发布 · 2.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#framework7 #前端框架

前端同时被 2 个专栏收录

26 篇文章

订阅专栏

framework7

4 篇文章

订阅专栏

本文介绍了如何在Framework7中实现页面加载时自动隐藏底部Tabbar的方法，包括使用穿透布局和添加特定类名等关键步骤。

首先在Framework7文档（http://docs.framework7.cn/Index/tabbar.html）中我们知道：

Framework7 允许你在ajax加载的页面自动隐藏工具栏/导航栏。只有在穿透布局的时候才可以使用。
你唯一需要做的就是在需要加载的页面上加一个类 “no-tabbar”(<div class="page no-tabbar">):

<!-- Page has additional "no-tabbar" class -->
<div data-page="about" class="page no-tabbar">
  <div class="page-content">
    <div class="content-block">
      <p><a href="#" class="back button">Go Back</a></p>
      ...
    </div>
  </div>
</div>

从文档可以知道隐藏工具栏相当容易，但有几个需要注意的地方。
首先自动隐藏工具栏只有在穿透布局的时候才可以使用，对于这一点相信很多人容易忽略掉，当时我就遇到过这样的问题。所以你必须使用穿透布局，给pages标签添加toolbar-throughclass即可（<div class="pages navbar-through toolbar-through">）
还有一个要注意的地方是你的toolbarhtml代码必须要放在穿透布局内（将toolbarhtml代码放在pagehtml代码内），否则在你跳转页面时是会自动隐藏工具栏，但你用力上拉时，工具栏又会跑出来。