小程序 自定义导航栏

自定义导航栏 通过slot插槽能够实现以下功能
1.自定义状态栏颜色
2.自定义导航栏颜色
3.自定义导航栏状态栏整体颜色
3.自定义导航栏状态栏整体背景图片
4.slot name="left"能自定义导航栏左边容器
5.slot name="center"能自定义导航栏中间容器
6.slot name="right"能自定义导航右边容器
7.自定义返回按钮 需要隐藏式back="{{false}}"

直接上代码了

//app.js
App({
  onLaunch: function () {
    wx.db = {};
    this.getSystemInfo();
  },

  getSystemInfo() {
    var res = wx.getSystemInfoSync();
    //获取状态栏高度
    wx.db.statusBarHeight = res.statusBarHeight;
    if (res.platform == 'android') {
      wx.db.navBarHeight = 48;
    } else {
      wx.db.navBarHeight = 44;
    }
  },
})

<!-- components/kz-nav-bar/kz-nav-bar.wxml -->
<view class="container">
    <!-- 状态栏 -->
    <view class="nav-statusBar" style="{{statusBarStyle}}"></view>
    <!-- 导航栏 -->
    <view class="nav-navBar" style="{{navBarStyle}}">
        {{title}}
        <slot name="center"></slot>
        <view class="left-container">
            <view wx:if="{{back}}" class="image-container" bind:tap="onbackAction">
                <image class="back-arrow" src="/images/arrow_back.png"></image>
            </view>
            <slot name="left"></slot>
        </view>
        <slot name="right"></slot>
    </view>
    <!-- 背景 -->
    <view class="bg-view" style="background-color:{{color}}">
        <!-- 背景图片 -->
        <image class="bg-image" src="{{image}}" mode="aspectFill" />
    </view>
</view>

// components/kz-nav-bar/kz-nav-bar.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 是否显示返回按钮  默认显示
    back: {
      type: Boolean,
      value: true
    },
    // 标题 标题如果为空 可以通过slot name:center设置自定义view
    title: {
      type: String,
      value: ''
    },
    // 字体颜色 默认黑体
    titleColor:{
      type:String,
      value:'var(--color-black)'
    },
    // 字体大小 单位rpx
    fontSize:{
      type:Number,
      value:35
    },
    // 背景颜色 默认白色
    color: {
      type: String,
      value: '#fff'
    },
    // 背景图片
    image: {
      type: String,
      value: ''
    },
    // 状态栏颜色
    statusBarColor: {
      type: String,
      value: ''
    },
    // 导航栏颜色
    navBarColor: {
      type: String,
      value: ''
    }
  },

  lifetimes: {
    attached: function () {
      //重设style
      var { statusBarStyle, navBarStyle, statusBarColor, navBarColor,titleColor,fontSize } = this.data;
      const statusBarHeight = wx.db.statusBarHeight;
      const navBarHeight = wx.db.navBarHeight;
      statusBarStyle = `height:${statusBarHeight}px;line-height:${statusBarHeight}rpx;background-color:${statusBarColor};`;
      navBarStyle = `height:${navBarHeight}px;line-height:${navBarHeight}rpx;background-color:${navBarColor};color:${titleColor};font-size:${fontSize}rpx;`;
      this.setData({ statusBarStyle, navBarStyle });
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    statusBarStyle: '',
    navBarStyle: ''
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onbackAction() {
      // 返回上一级
      try {
        wx.navigateBack({
          delta: 1
        });
      } catch (error) {

      }
    }
  }
})

/* components/kz-tabbar/kz-tabbar.wxss */
.kz-tabbar{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-content: center;
  background-color: white;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
  /* border-top: 1rpx solid rgba(0, 0, 0, 0.1); */
  z-index: 1024;
  height: calc(100rpx + env(safe-area-inset-bottom) / 2);
}
.tabbar-item{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.tabbar-item-image{
   50rpx;
}
.tabbar-item-title{
  font-size: 20rpx;
}

使用

<kz-nav-bar title="订单" back="{{true}}" color="{{'var(--color-orange)'}}"></kz-nav-bar>>