相关的应用和视图方法（Related app and view methods）
优质
小牛编辑
127浏览
2023-12-01
描述 (Description)
的View(《div class = "view"》)是从由它自己的设置，导航功能和历史的应用程序的视觉部分断开。 每个视图可以有不同的导航条和工具栏的布局。
它认为包装容器除了所有可视视modals和panels 。 当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允许您使用可用于导航条的方法如下-
| S.No | 说明与方法 |
|---|---|
| 1 | myApp.hideNavbar(navbar) 它是用来隐藏特定的导航条。 该navbar可以是所需的导航条的弯曲路径或串（与CSS选择），并且是必需的参数。 |
| 2 | myApp.showNavbar(navbar) 它是用来表示一个特定的导航条。 该navbar可以是所需的导航条的弯曲路径或串（与CSS选择），并且是必需的参数。 |
| 3 | view.hideNavbar() 它隐藏在导航条这个观点。 |
| 4 | view.showNavbar() 这表明在该视图导航条。 |
| 5 | myApp.sizeNavbars(viewContainer) 它被用来重新计算位置样式导航栏。 所述viewContainer可以是CSS选择字符串或弯曲的路径，并且仅由iOS的主题使用。 |
例子 (Example)
下面的例子演示了如何使用方法Framework7视图，隐藏，当你点击导航栏的Hide Navbar （导航条使用.hide级），通过点击按钮，显示导航条Show Navbar （导航条使用.show级）按钮。
<!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>
输出 (Output)
让我们来进行上面给出看看代码是如何工作的以下步骤 -
保存上面给出的HTML代码navbar_app_view.html在你的根文件夹中的文件服务器。
打开这个HTML文件为http:作为//localhost/navbar_app_view.html和，如下所示被显示的输出。
当您运行的代码，你可以通过点击该按钮隐藏导航栏和隐藏导航栏显示导航条通过点击按钮显示导航栏。