Framework7 - 相关应用和视图方法

描述

View(<div class = "view">) 是应用的一个分离的视觉部分，包含其自身设置、导航和历史记录。每个视图可以有不同的导航栏和工具栏布局。

Views 是所有视觉视图（除了 模态框 和面板）的包装容器。当 views 被设置为应用主体的主要包装容器时，只允许一个 views 元素。以下代码显示了 views 的 HTML 结构：

<body>
   ...
   <div class = "panel panel-left panel-cover">
      <div class = "view panel-view"> .... </div>
   </div>
   
   <!-- Views -->
   <div class = "views">
      <!-- Your main view -->
         
      <div class = "view view-main">
         <!-- Navbar-->
         <!-- Pages -->
         <!-- Toolbar-->
      </div>
         
      <!-- Another view -->
      <div class = "view another-view">
         <!-- Navbar-->
         <!-- Pages -->
         <!-- Toolbar-->
      </div>
   </div>
  
   <div class = "popup">
      <div class = "view popup-view"> .... </div>
   </div>
   ....
      
</body>

在初始化 View 时，framework7 允许您使用如下所示的导航栏可用方法：

序号	方法及描述
1	myApp.hideNavbar(navbar) 用于隐藏特定导航栏。navbar 可以是 HTMLElement 或所需导航栏的字符串（带 CSS 选择器），是必需参数。
2	myApp.showNavbar(navbar) 用于显示特定导航栏。navbar 可以是 HTMLElement 或所需导航栏的字符串（带 CSS 选择器），是必需参数。
3	view.hideNavbar() 隐藏此视图中的导航栏。
4	view.showNavbar() 显示此视图中的导航栏。
5	myApp.sizeNavbars(viewContainer) 用于重新计算导航栏的位置样式。viewContainer 可以是 CSS 选择器字符串或 HTMLElement，仅供 iOS 主题使用。

示例

以下示例演示了在 Framework7 中使用视图方法，当您点击 隐藏导航栏（使用 .hide-navbar 类）按钮时隐藏导航栏，并通过点击 显示导航栏（使用 .show-navbar 类）按钮显示导航栏。

<!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">
            <div class = "pages">
               <div data-page = "home" class = "page navbar-fixed">
                  <div class = "navbar">
                     <div class = "navbar-inner">
                     
                        <div class = "left">
                           <a href = "#" class = "link"> <i class = "icon icon-back"></i><span>Previous</span></a>
                        </div>
                        
                        <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 = "page-content">
                     <div class = "content-block">
                        <p><a href = "#" class = "button hide-navbar">Hide Navbar</a></p>
                        
                        <p> <a href = "#" class = "button show-navbar">Show Navbar</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 $ = Framework7.$;
         var mainView = myApp.addView('.view-main');
         
         $('.hide-navbar').on('click', function () {
            mainView.hideNavbar();
         });
         
         $('.show-navbar').on('click', function () {
            mainView.showNavbar();
         });
      </script>
   </body>

</html>

输出

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

将上面给出的 html 代码保存为 navbar_app_view.html 文件到您的服务器根目录。
以 https://127.0.0.1/navbar_app_view.html 的方式打开此 HTML 文件，输出结果如下所示。
运行代码时，您可以通过点击“隐藏导航栏”按钮隐藏导航栏，并通过点击“显示导航栏”按钮显示导航栏。

framework7_navbars.htm

打印页面