cordova 打包的应用,默认是没有状态栏沉浸的。我们需要自己加入
下面介绍的方法并不是自动跟随页面头部颜色而自动切换颜色沉浸,而是自己定义好颜色
话不多说 ,上代码
首先安装插件
cordova plugin add cordova-plugin-statusbar
然后在App.vue里面添加如下代码,并使用watch侦听器,监听路由跳转
export default {
data() {
return {
active: "index",
statusBarcolorPath:{
color:['/index','/files']//设置所需要改变的页面的路由
}
}
},
watch:{
/* 监听跳转页面 */
$route: (val)=> {
//如果跳转的页面包含了statusBarcolorPath.color里面的路由页面
if(this.statusBarcolorPath.color.indexOf(val.path) != -1){
StatusBar.backgroundColorByHexString("#fff");//设置状态栏背景颜色
StatusBar.styleDefault();//设置状态栏字体颜色为黑色
}else {
StatusBar.backgroundColorByHexString("#388ef1");
StatusBar.styleLightContent();//设置状态栏字体颜色为白色
}
},
},
}
参考这篇文章写的,非常感谢!