一、修改statusBar颜色
- 添加cordovaStatusbar插件 命令行输入下面命令
-
cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git
在config.xml文件里会自动多出下面这个代码
-
<plugin name="cordova-plugin-statusbar" spec="~2.4.2" />
自己再添加一行设置statusBar颜色的代码(添加整个应用的statusBar)
<preference name="StatusBarBackgroundColor" value="#0FA0FA" />
整个app的statusBar 的颜色就修成设置的颜色了,如果需要根据不同页面设置不同颜色则需要 在页面上设置对颜色进行设置注:对于单页应用则会修改其他路由页面的颜色目前解决方法就是在watch $router来设置不同的状态栏颜色 具体代码如下:
export default { data () { return { statusBarcolorPath:{ black:['/login','/me']//设置黑色背景的路由 } } }, watch:{ $route:function (val) { if(this.statusBarcolorPath.black.indexOf(val.path)!=-1){ StatusBar.backgroundColorByHexString("#333");//设置状态栏颜色 }else { StatusBar.backgroundColorByHexString("#0FA0FA"); } }, }
上面代码设置登录和我的两个页面为#333颜色,其他都为#0fa0fa 实现效果如下
除了设置statusBar颜色方法还提供了其他方法
- StatusBar.isVisible 是否已经显示
- StatusBar.hide(); 隐藏状态栏
- StatusBar.show(); 显示状态栏
以上方法在安卓上已经试验可用