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>