app.vue

    1. {
    2. watch: {
    3.     $route (to, from) {
    4.       // 根据路由动态改变状态栏样式
    5.       this.setStatusBar()
    6.     }
    7. created () {
    8.     // 设置状态栏和 标题栏高度
    9.     Vue.prototype.statusBarHeight = 20
    10.     Vue.prototype.titleBarHeight = 50
    11.     document.addEventListener('deviceready', this.onDeviceReady, false)
    12.   },
    13. methods: {
    14.     onDeviceReady () {
    15.       console.info('===  onDeviceReady ===')
    16.       // 保证安卓第一次进入状态栏能覆盖webview 安卓需要特殊处理，参见 cordova 官方文档
    17.       if (cordova.platformId === 'android') {
    18.         StatusBar.overlaysWebView(true)
    19.                 this.setStatusBar() //解决首页不设置问题
    20.       }
    21.     },
    22.     setStatusBar () {
    23.       // 状态栏字体色为白色的路由都设置了一个路由元meta,属性statusBgc为1
    24.       this.$route.meta.statusBgc ? StatusBar.styleLightContent() : StatusBar.styleDefault()
    25.     }
    26.   }}