基于uniapp 開發(fā)小程序確實速度快一些，下面是實現(xiàn)簡易沉浸式導(dǎo)航組件

只包含基礎(chǔ)樣式，標(biāo)題插槽，返回按鈕等功能，如需要更精準控制膠囊位置等需配合getMenuButtonBoundingClientRect 方法再做優(yōu)化

效果展示

image.png

實現(xiàn)方法

<template>
  <!-- 自定義狀態(tài)欄 -->
  <view>
    <view class="statu-bar-area" :style="{height:statusBarStyle.height}"></view>
    <view class="nav-area">
      <view class="nav-left" hover-class="active-hover">
        <uni-icons type="back" size="26" @click="onBack" v-if="pages.length>1"></uni-icons>
      </view>
      <view class="nav-middle">
        <slot name="default"  >
          <!-- 測試導(dǎo)航內(nèi)容 -->
        </slot>
      </view>
      <view class="nav-right"></view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "custom-nav-bar",
    data() {
      return {
        windowInfo: {},
        pages: []
      };
    },
    computed: {
      statusBarStyle() {
        return {
          height: (this.windowInfo.statusBarHeight || 0) + 'px'
        }
      }
    },
    beforeMount() {
      this.windowInfo = uni.getWindowInfo()
      this.pages = getCurrentPages();
    },
    methods: {
      onBack() {
        uni.navigateBack()
      }
    }
  }
</script>

<style scoped lang="scss">
  .nav-area {
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #222222;

    .nav-left {
      width: 200rpx;
      display: flex;
      align-items: center;
      padding-left: 16rpx;
    }

    .nav-right {
      width: 200rpx;
    }

    .nav-middle {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 28rpx;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
  }
</style>