原生小程序自定义导航及状态栏

app.json
组件
 "usingComponents": {
    "page": "./component/page/index",
    "paging": "./component/paging/index",
    "t-nav-bar": "./itriton/nav-bar/index",
    "t-divider": "./itriton/divider/index"
  },

nav-bar/index.wxml

<view style='height:{{navHeight + status}}px;'>
  <cover-view class='nav-bar-wrap' style='padding-top:{{ status }}px;{{containerStyle}}'>
    <cover-view class='nav-bar' style='height:{{navHeight}}px;{{containerStyle}};'>
      <cover-view class='{{"nav-bar-btn_icon_"+type}}' style='height:32px;width:81px;background:{{btnColor}}'
        wx:if='{{visible}}'>
        <cover-view class='nav-bar-go_back' catchtap='bindToBack'>
          <cover-image src='{{"./icons/back-"+type+".png"}}' class='nav-bar-img'></cover-image>
        </cover-view>
        <cover-view class='{{"nav-bar-mid_line_"+type}}'></cover-view>
        <cover-view class='nav-bar-go_home' catchtap='bindToHome'>
          <cover-image src='{{"./icons/home-"+type+".png"}}' class='nav-bar-img'></cover-image>
        </cover-view>
      </cover-view>
      <cover-view class="nav-bar_left" style="height:32px;width:81px;" wx:if="{{left}}">
        <cover-image class="nav-bar__img" src="{{left}}" bindtap="leftClick"></cover-image>
      </cover-view>
      <cover-view class='nav-bar-title absolute' style='line-height:{{navHeight}}px;{{textStyle}}'>{{title}}</cover-view>
    </cover-view>
  </cover-view>
</view>

index.js
// pages/nav-bar/nav-bar.js

Component({
  options: {
    multipleSlots: true
  },
  properties: {
    background: {
      type: String,
      value: 'rgba(255, 255, 255, 1)'
    },
    type: {
      type: String,
      value: 'light'
    },
    btnColor: {
      type: String,
      value: 'rgba(255, 255, 255, 1)'
    },
    textColor: {
      type: String,
      value: 'rgba(0, 0, 0, 1)'
    },
    title: {
      type: String,
      value: ''
    },
    visible: {
      type: Boolean,
      value: true
    },
    left: {
      type: String,
      value: ''
    }
  },
  lifetimes:{
    ready() {
      this.setNavSize()
      this.setStyle()
    },
  },
  data: {
    fontSize: 16
  },
  methods: {
    // 通过获取系统信息计算导航栏高度
    setNavSize() {
      let sysinfo = wx.getSystemInfoSync(),
        statusHeight = sysinfo.statusBarHeight,
        isiOS = sysinfo.system.indexOf('iOS') > -1,
        navHeight;
      if (!isiOS) {
        navHeight = 48;
      } else {
        navHeight = 44;
      }
      this.setData({
        status: statusHeight,
        navHeight: navHeight
      })
    },
    setStyle() {
      let containerStyle, textStyle, iconStyle;
      containerStyle = [
        'background:' + this.data.background
      ].join(';');
      textStyle = [
        'color:' + this.data.textColor,
        'font-size:' + this.data.fontSize + 'px'
      ].join(';');
      iconStyle = [
        'width: ' + this.data.iconWidth + 'px',
        'height: ' + this.data.iconHeight + 'px'
      ].join(';');
      this.setData({
        containerStyle: containerStyle,
        textStyle: textStyle,
        iconStyle: iconStyle
      })
    },
    bindToBack() {
      const pages = getCurrentPages();
      if (pages.length > 1) {
        wx.navigateBack({
          delta: 1
        })
      }
      this.triggerEvent('back', {
        back: 1
      })
    },
    bindToHome() {
      this.triggerEvent('home', {});
    },
    leftClick() {
      this.triggerEvent('left', {});
    }
  }
})

index.wxss
.nav-bar-wrap {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  z-index: 999;
}

.nav-bar {
  font-size: 34rpx;
  letter-spacing: 2rpx;
  position: relative;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  -webkit-align-items: center;
  height: 44px;
}

.nav-bar-img {
  width: 18px;
  height: 18px;
  z-index: 999;
}

.nav-bar-back {
  margin-left: 5px;
}

.nav-bar-back .nav-bar-img {
  margin-left: 5px;
}

.nav-bar-title {
  font-weight: 600;
  text-align: center;
  vertical-align: center;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 340rpx;
}

.nav-bar-title.absolute {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav-bar_left{
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.nav-bar__img{
  height: 25px;
  width: 25px;
  z-index: 999999;
}

.nav-bar-btn_icon_dark {
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 35rpx;
  border-radius: 40rpx;
  border: 1rpx solid rgba(255, 255, 255, .3);
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  margin-left: 10px;
}

.nav-bar-btn_icon_light {
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 35rpx;
  border-radius: 40rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.3);
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  margin-left: 10px;
}

.nav-bar-go_back {
  flex: 1;
  -webkit-flex: 1;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
}

.nav-bar-mid_line_dark {
  background-color: rgba(255, 255, 255, .3);
  width: 1rpx;
  height: 32rpx;
  z-index: 999;
}

.nav-bar-mid_line_light {
  background-color: rgba(255, 255, 255, .3);
  width: 1rpx;
  height: 32rpx;
  z-index: 999;
}

.nav-bar-go_home {
  flex: 1;
  -webkit-flex: 1;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

使用
<!--pages/index/index.wxml-->
<page id="page">
  <t-nav-bar title="首页" visible="{{false}}" background="#FFF" btn-color="{{nav_bar_btn_color}}" text-color="#333" />
  <t-search-bar placeholder="搜索商城内所有商品" is-border="{{false}}" fixed></t-search-bar>
  <view class="bg-white pl-20 pr-20">
    <t-swiper list="{{swiperList}}" bind:click="handleSwiperClick" border-radius="10rpx" shape="square" height="230rpx" active-color="{{sub_color}}"></t-swiper>
    <t-menu list="{{menuList}}" bind:click="handleMenuClick"></t-menu>
  </view>
  <view class="p-20">
    <view class="flex justify-between flex-wrap">
      <goods url="{{item.url}}" name="{{item.name}}" price="¥{{item.price}}" wx:for="{{goodsList}}" wx:key="unique" data-url="/pagesGoods/detail/index" bindtap="routeToNext"></goods>
    </view>
  </view>
</page>

index.wxss

/* pages/index/index.wxss */
.nav {
  display: flex;
  flex-wrap: wrap;
  padding: 40rpx 40rpx 0px;
  justify-content: space-between;
}

.nav__cell {
  padding: 20rpx;
  border-radius: 12rpx;
  width: 40%;
  margin: 0 2% 40rpx;
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 1;
}

.nav__cell::after {
  content: "";
  position: absolute;
  z-index: -1;
  background-color: inherit;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: -10%;
  border-radius: 10rpx;
  opacity: 0.2;
  transform: scale(0.9, 0.9);
}

.nav-title {
  font-size: 32rpx;
  font-weight: 300;
}

.nav-title::first-letter {
  font-size: 40rpx;
  margin-right: 4rpx;
}

.nav-name {
  font-size: 28rpx;
  text-transform: Capitalize;
  margin-top: 20rpx;
  position: relative;
}

.nav-name::before {
  content: "";
  position: absolute;
  display: block;
  width: 40rpx;
  height: 6rpx;
  background: #fff;
  bottom: 0;
  right: 0;
  opacity: 0.5;
}

.nav-name::after {
  content: "";
  position: absolute;
  display: block;
  width: 100rpx;
  height: 1px;
  background: #fff;
  bottom: 0;
  right: 40rpx;
  opacity: 0.3;
}

.nav-name::first-letter {
  font-weight: bold;
  font-size: 36rpx;
  margin-right: 1px;
}