开发手册 欢迎您!
软件开发者资料库

Framework7 - 状态栏

Framework7状态栏 - 从概述,环境,布局,导航栏,工具栏,搜索栏,状态栏,侧面板,内容块,布局网格,叠加层,预加载器,进度条,列表视图,手风琴,卡片,芯片,按钮开始学习Framework7 ,动作按钮,窗体,选项卡,Swiper滑块,照片浏览器,自动完成,选择器,日历,刷新,无限滚动,消息,消息栏,通知,延迟加载,颜色主题,细线,模板概述,自动编译,Template7页面,活动状态,点击保持事件,触摸波纹。

说明

iOS 7+允许您构建全屏应用,当状态栏与您的应用重叠时,可能会产生问题. Framework7通过检测您的应用是否处于全屏模式来解决此问题.如果您的应用处于全屏模式,那么Framework7会自动将 with-statusbar-overlay 类添加到< html> (如果应用未全屏,则会移除模式)你需要在< body> 中添加 statusbar-overlay 类,如下面的代码所示 :

...         
      ...

默认情况下,< div> 将始终隐藏并固定在屏幕顶部.它仅在应用程序处于全屏模式时可见,并且 with-statusbar-overlay 类被添加到< html> .

示例

以下示例演示了在Framework7中使用状态栏 : 

                           My App                        
                                       

Contents goes here...

                                                                                 My App                                                                                                                                                                                                      

This is simple application...

                     

page contents goes here!!!

                                                                                                      First Link                  Second Link                                                                                 

输出

让我们执行以下步骤,看看上面给出的代码如何工作 : 去;

  • 将上面给出的html代码保存为服务器根文件夹中的 status_bar.html 文件.

  • 将此HTML文件打开为http://localhost/status_bar.html,输出显示如下.

示例显示使用 statusbar-overlay ,可让您在状态栏与应用重叠时构建全屏应用.