Framework7 - 自动隐藏导航栏

描述

对于一些不需要导航栏的Ajax加载页面，导航栏可以自动隐藏/显示。这仅在使用贯穿式布局时才有效。您需要在加载的页面中添加no-navbar类并放置一个空的导航栏。

示例

以下示例演示了单击链接时如何自动隐藏导航栏：

创建文件 navbar_hide_auto_about.html

navbar_hide_auto_about.html

<div class = "navbar">
   <div class = "navbar-inner"></div>
</div>

<div data-page = "about" class = "page no-navbar">
   <div class = "page-content">
      <div class = "content-block">
         <p> <a href = "#" class = "back button">Go Back</a></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>
         
         <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>
         
         <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>
         
         <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>

navbar_hide_auto.html

<!DOCTYPE html>
<html>

   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name = "apple-mobile-web-app-capable" content = "yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>Navbar View Methods</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main navbar-through">
            <div class = "navbar">
               <div class = "navbar-inner">
                  <div class = "center">Center Part</div>
                  
                  <div class = "right">
                     <a href = "#" class = "link icon-only"> <i class = "icon icon-bars"></i></a>
                  </div>
                  
               </div>
            </div>
            
            <div class = "pages">
               <div data-page = "home" class = "page">
                  <div class = "page-content">
                     <div class = "content-block">
                        <p><a href = "navbar_hide_auto_about.html" class = "button">About</a></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>
                        
                        <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>
                        
                        <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>
                        
                        <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>
            </div>
            
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script>
         var myApp = new Framework7();
         
         var mainView = myApp.addView('.view-main', {
            dynamicNavbar: true
         });
      </script>
   </body>

</html>

输出

让我们执行以下步骤来查看上述代码是如何工作的：

将上述HTML代码保存为navbar_hide_auto.html文件到您的服务器根文件夹。
以https://127.0.0.1/navbar_hide_auto.html打开此HTML文件，输出将如下所示。
运行代码时，您可以根据需要自动隐藏或显示导航栏。

framework7_navbars.htm

打印页面