状态栏
Framework7 随附状态栏组件(cordova插件状态栏 的外壳),可以利用其自定义应用状态栏及其行为。
仅当应用在带有已安装 cordova插件状态栏 的 cordova/capacitor 环境中运行时,才可以使用此功能。
状态栏应用参数
可以通过在 `statusbar` 属性的应用初始化传递状态栏相关参数来控制一些默认状态栏行为
var app = new Framework7({
statusbar: {
iosOverlaysWebView: true,
},
});
现在我们来看看所有可用参数的列表
参数 | 类型 | 默认值 | 描述 |
---|---|---|---|
enabled | boolean | true | 启用 Framework7 中状态栏的处理。如果不希望 Framework7 处理状态栏行为,请禁用它 |
iosBackgroundColor | string | 十六进制字符串(#RRGGBB ),当应用程序在 iOS 设备上运行时的背景颜色。如果传递,它将覆盖 CSS 值 | |
androidBackgroundColor | string | 十六进制字符串(#RRGGBB ),当应用程序在 Android 设备上运行时的背景颜色。如果传递,它将覆盖 CSS 值 | |
scrollTopOnClick | boolean | true | 如果启用,则单击状态栏覆盖将滚动页面内容到顶部。 |
iosOverlaysWebView | boolean | true | 当应用程序在 iOS 设备上运行时,状态栏覆盖是否覆盖 WebView。 |
androidOverlaysWebView | boolean | true | 当应用程序在 Android 设备上运行时,状态栏覆盖是否覆盖 WebView。 |
iosTextColor | string | black | 当应用程序在 iOS 设备上运行时,状态栏文本颜色。可以是 |
androidTextColor | string | black | 当应用程序在 Android 设备上运行时,状态栏文本颜色。可以是 |
Statusbar App 方法
在应用程序初始化后,我们可以使用与状态栏相关的应用程序方法来控制状态栏
app.statusbar.hide() | 隐藏状态栏 |
app.statusbar.show() | 显示状态栏 |
app.statusbar.overlaysWebView(overlays) | 状态栏覆盖是否覆盖 WebView
|
app.statusbar.setTextColor(color) | 设置/更改状态栏文本颜色。
|
app.statusbar.setBackgroundColor(hex) | 设置/更改状态栏背景颜色
|
app.statusbar.isVisible() | 如果系统状态栏可见,则返回 true ,如果不可见,则返回 false |