<template>
<view class="container">
<button type="default" @tap="check">切换</button>
</view>
</template>
<script>
export default {
data() {
return {
href: 'https://uniapp.dcloud.io/component/README?id=uniui',
theme:false
}
},
methods: {
check(){
this.theme=!this.theme;
plus.navigator.setStatusBarStyle(this.theme?"dark":"light");
},
},
onReady() {
},
onShow() {
},
}
</script>
<style>
.container {
padding: 20px;
font-size: 14px;
line-height: 24px;
}
</style>
Tomoon
- 发布：2020-10-19 10:18
- 更新：2020-10-27 10:07
- 阅读：1185
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： 10.0.18363.1016
HBuilderX类型： Alpha
HBuilderX版本号： 2.9.2
手机系统： Android
手机系统版本号： Android 10
手机厂商： vivo
手机机型： iQOO Neo
页面类型： vue
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
点击切换按钮，动态改变状态栏颜色。
点击切换按钮，动态改变状态栏颜色。
预期结果：
全局状态栏颜色改变。
全局状态栏颜色改变。
实际结果：
1.只有当前页状态栏颜色改变，切换到另外一个一级页面，状态栏颜色未改变，再回到当前页面，状态栏颜色又恢复默认了。
2.切换后当前页面状态栏颜色改变，再次点击当前页底部tabbar，状态栏颜色又恢复默认了。
1.只有当前页状态栏颜色改变，切换到另外一个一级页面，状态栏颜色未改变，再回到当前页面，状态栏颜色又恢复默认了。
2.切换后当前页面状态栏颜色改变，再次点击当前页底部tabbar，状态栏颜色又恢复默认了。
bug描述：
tabbar一级页使用plus.navigator.setStatusBarStyle()动态切换状态栏前景色，在onReady和onShow切换均无效，需要加延时器执行生效。切换成功后跳转到其他一级页面，再返回，之前的前景色设置又变成默认色了。
Tomoon (作者) - 90后小菜鸟
这种onshow设置延迟的方式勉强能够解决需求，但是每次切换页面的时候状态栏颜色会闪烁，并且tabbar在app中存在在当前页再次点击当前tabbar后就又回到默认颜色的bug。
我的需求很简单 就是切换主题功能，切换到深色主题的时候， 状态栏的颜色需要改变，不然深色的情况下 状态栏看不清。
