微信小程序自定义导航栏及其封装的全过程

<!--components/nav-bar/nav-bar.wxml-->
<view class="nav-bar">
  <view class="status" style="height: {{statusHeight}}px;"></view>
    <view class="nav">
      <view class="left">
        <view class="slot">
          <slot name="left"></slot>
        </view>
        <view class="default">
          <image class="icon" src="/assets/images/icons/arrow-left.png"></image>
        </view>
      </view>
      <view class="center">
        <view class="slot">
          <slot name="center"></slot>
        </view>
        <view class="default">
          {{title}}
        </view>
      </view>
      <view class="right"></view>
    </view>
  </view>

/* components/nav-bar/nav-bar.wxss */
/* 自定义导航 */
.nav {
  display: flex;
  height: 44px;
  color: #fff;
}

.left, .right, .center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav .left, .nav .right {
  width: 120rpx;
}

.nav .center {
  flex: 1;
}

/* 控制内容显示 */
.left .icon {
  width: 40rpx;
  height: 40rpx;
}

.default {
  display: none;
}

.slot:empty + .default {
  display: flex;
}

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

const app = getApp()
Component({
  options: {
    multipleSlots: true
  },
  properties:{
    title: {
      type: String,
      value: "导航标签"
    }
  },
  data:{
    statusHeight:20
  },
  lifetimes: {
    attached(){
      this.setData({statusHeight: app.globalData.statusHeight})
    }
  }
})