语言: ENCN

页面滚动时自动隐藏工具栏

当想下滚动页面的时候,Framework7可以让导航栏和工具栏自动隐藏。

如果你想全局启用这个功能,你只需要在 应用初始化 时候设置这几个参数:hideNavbarOnPageScroll, hideToolbarOnPageScroll, hideTabbarOnPageScrollshowBarsOnPageScrollEnd:

如果你只想在某些特定页面打开自动隐藏的功能,你可以通过添加额外的 <div class="page-content"> 类来实现:

  • hide-bars-on-scroll - 页面滚动时自动隐藏工具栏和导航栏

  • hide-navbar-on-scroll - 页面滚动时自动隐藏导航栏

  • hide-toolbar-on-scroll - 页面滚动时,自动隐藏工具栏

  • hide-tabbar-on-scroll - 页面滚动时,自动隐藏带图标的工具栏(tabbar)

可以通过添加以下的样式禁用滚动隐藏工具栏

  • keep-bars-on-scroll - 页面滚动时不隐藏工具栏和导航栏

  • keep-navbar-on-scroll - 页面滚动时不隐藏导航栏

  • keep-toolbar-on-scroll - 页面滚动时不隐藏工具栏

  • keep-tabbar-on-scroll - 页面滚动时不隐藏带图标的工具栏(tabbar)

示例

...
<div class="page">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="left"></div>
      <div class="center">Hide Bars On Scroll</div>
      <div class="right"></div>
    </div>
  </div>
  <!-- "hide-bars-on-scroll" class to hide both Navbar and Toolbar -->
  <div class="page-content hide-bars-on-scroll">
    <div class="content-block">
      <p>Scroll page down</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida. Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Integer sit amet lacus eget ipsum pulvinar interdum. Proin semper turpis sed placerat dapibus. Sed iaculis id nibh a viverra. Sed vitae tellus sed purus lacinia dignissim. Aenean sagittis interdum leo in molestie. Aliquam sodales in diam eu consectetur. Sed posuere a orci id imperdiet.</p>
      ...
    </div>
  </div>
  <div class="toolbar">
    <div class="toolbar-inner">
      <a href="#" class="link">Hello</a>
      <a href="#" class="link">World</a>
    </div>
  </div>
</div>
...

如果你不希望在页面滚动到底部的时候显示 导航栏/工具栏,你可以在App 初始化的时候禁用 showBarsOnPageScrollEnd 属性

如果你不希望在页面滚动到顶部的时候显示 导航栏/工具栏,你可以在App 初始化的时候禁用 showBarsOnPageScrollTop 属性