原生微信小程序实现自定义状态栏

说明

自定义状态栏比自定义底部栏的实现稍微难一些，主要是需要适应原本胶囊按钮的位置比较麻烦。

组件相关代码

app.json

"window": {
	"navigationStyle": "custom"
},

app.js

onLaunch() {
    // 自定义导航栏信息
    // 获取系统信息
    const systemInfo = wx.getSystemInfoSync();
    // 胶囊按钮位置信息
    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
    // 导航栏高度 = 状态栏高度 + 44
    // this.globalData.navBarHeight = systemInfo.statusBarHeight + 44; // 不准；对于android，一般navigationBarHeight为48px，而对于ios一般为40px
    this.globalData.statusBarHeight = systemInfo.statusBarHeight; // 手机状态栏高度
    this.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height; // 小程序导航栏高度
    this.globalData.contentMarginTop = this.globalData.navBarHeight + this.globalData.statusBarHeight; // 一般内容应该显示的位置
},
globalData: {
    navBarHeight: 0, // 小程序导航栏高度
    statusBarHeight: 0, // 手机状态栏高度
    contentMarginTop: 0, // 一般内容应该显示的位置
}

navBar 的 js

const app = getApp()

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title: {
      type: String,
      value: ''
    },
    color: {
      type: String,
      value: '#F6F6F6'
    }

  },

  observers:{ //监听数据的更改
    title(data){
      this.data.title = data //这里不要写this.setData({})
    },
    value(data) {
      this.data.color = data
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    title: '',
    color: '#F6F6F6',
    statusBarHeight: '',
    navBarHeight: '',
    contentMarginTop: '',
    firstPage: false
  },

  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
      this.setData({
        statusBarHeight: app.globalData.statusBarHeight,
        navBarHeight: app.globalData.navBarHeight,
        contentMarginTop: app.globalData.contentMarginTop,
      })
      let pages = getCurrentPages(); // 页面栈
      let prevPage = pages[pages.length - 2];  //上一个页面
      if (prevPage) {
        this.setData({
          firstPage: true
        })
      }
    },
    detached() {
      // 在组件实例被从页面节点树移除时执行
    },
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 返回按钮
    back() {
      wx.navigateBack()
    },

    // 回到首页
    home() {
      wx.reLaunch({
        url: '/pages/index/index',
      })
    }
  }
})

navBar 的 wxml

<!-- 自定义底部栏 -->
<tabBar class="tabBar">
  <view data-tab="index" bindtap="onTab">
    <image class="img" hidden="{{tab == 'index'}}" src="/images/tabBar/home.png" mode="widthFix"></image>
    <image class="img" hidden="{{tab != 'index'}}" src="/images/tabBar/home_active.png" mode="widthFix"></image>
    <view class="tab-title">首页</view>
  </view>
  <view data-tab="map" bindtap="onTab">
    <image class="img" hidden="{{tab == 'map'}}" src="/images/tabBar/map.png" mode="widthFix"></image>
    <image class="img" hidden="{{tab != 'map'}}" src="/images/tabBar/map_active.png" mode="widthFix"></image>
    <view>地图</view>
  </view>
  <view>
    <image class="img-scan" src="/images/tabBar/scan.gif" mode="widthFix" catchtap="scan"></image>
  </view>
  <view data-tab="order" bindtap="onTab">
    <image class="img" hidden="{{tab == 'order'}}" src="/images/tabBar/order.png" mode="widthFix"></image>
    <image class="img" hidden="{{tab != 'order'}}" src="/images/tabBar/order_active.png" mode="widthFix"></image>
    <view>订单</view>
  </view>
  <view data-tab="mine" bindtap="onTab">
    <image class="img" hidden="{{tab == 'mine'}}" src="/images/tabBar/mine.png" mode="widthFix"></image>
    <image class="img" hidden="{{tab != 'mine'}}" src="/images/tabBar/mine_active.png" mode="widthFix"></image>
    <view>我的</view>
  </view>
</tabBar>

navBar 的 wxss

.tabBar{
  position:fixed;
  width: 100%;
  height: 100rpx;
  bottom: 0;
  color: #8A8B8B;
  font-size: 20rpx;
  display: flex;
  justify-content: space-around;
  padding:  10rpx 0 20rpx 0;
  background-color: #fff !important;
  box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.3);
  text-align: center;
}
.img{
  width: 48rpx;
  height: 48rpx;
}
.img-scan{
  position: relative;
  left: -15rpx;
  width: 180rpx;
  height: 108rpx;
  margin-top: -60rpx;
}
.tabBar > view{
  width: 150rpx;
}

navBar 的 json

{
  "component": true,
  "usingComponents": {}
}