微信小程序自定义状态栏

微信小程序提供的状态栏，只能设置标题，如果想要增加返回按钮和回到主页等按钮操作，只能使用自定义格式替换。

先在app.json 设置导航栏格式为"navigationStyle": "custom"。

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black",
    "navigationStyle": "custom"
  },

自定义一个状态栏组件navbar，组件必须要在json文件里面设置"component": true,申明这是一个组件模块。

<!--components/navbar/navbar.wxml-->
<view style="height:{{navigationBarHeight}}px;background:white">
  <view style="height:{{statusBarHeight}}px"></view>
  <view class="bar-style">
    <view class="back-style" bindtap="backClick" wx:if="{{back}}">
      <image></image>
    </view>
    <view class="home-style" bindtap="homeClick" wx:if="{{home}}">
      <image></image>
    </view>
    <text class="title">{{title}}</text>
  </view>
</view>

/* components/navbar/navbar.wxss */

.bar-style{
  display: flex;
  height: 44px;
  flex-direction: row;
  width: 100%
}

.back-style, .home-style{
  margin-left: 16rpx;
  justify-content: flex-start;
  width: 56rpx;
  background: green;
  align-items: center;
  display: flex;
  flex-direction: row;
  z-index: 1;
  text-align: center
}

.title{
  text-align: center;
  font-size: 18px;
  height: 44px;
  position: absolute;
  left: 10px;
  right: 10px;
  text-overflow: ellipsis;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  display: flex
}

// components/navbar/navbar.js

const app = getApp()

Component({

  /**
   * 组件的属性列表
   */
  properties: {
    title: {
      type: String,
      value: "biaoti"
    },

    back:{
      type:Boolean,
      value:false
    },

    home:{
      type:Boolean,
      value:false
    },

    backhome:{
      type:Number,
      value:0
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    statusBarHeight: app.globalData.statusBarHeight,
    navigationBarHeight: app.globalData.statusBarHeight + 44,
  },

  /**
   * 组件的方法列表
   */
  methods: {
    backClick:function(){
      console.log("back btn")
    },

    homeClick:function(){
      console.log("home btn")
    }

  }
})

app.js文件里面加入获取状态栏高度。

globalData: {
    userInfo: null,
    statusBarHeight: wx.getSystemInfoSync()['statusBarHeight'] //状态栏高度
  }

 

在使用时候，在使用page的json文件定义组件路径，或者在全局app.json里面定义，则所有页面都可以使用当前组件。

"usingComponents": {
    "navbar": "components/navbar/navbar"
  }

使用组件，组件里面属性为boolean时候，使用需要"back="{{false}}",直接食用back={{false}}不然不会生效,必须要加""。 

<view >
  <navbar title="标题" back="{{false}}" home="{{false}}"></navbar>
</view>