store-management-app/src/components/navBar/index.vue

<template>
  <view>
    <view class="status_bar">
      <!-- 这里是状态栏 -->
    </view>
    <!-- 建议放在外层 -->
    <up-sticky>
      <up-navbar @leftClick="backhandle" safeAreaInsetTop :placeholder="true">
        <template #left>
          <view class="uv-nav-slot">
            <uv-icon name="arrow-left" size="19" v-if="isShowLeft"></uv-icon>
          </view>
        </template>
        <template #right>
          <slot name="right"></slot>
        </template>
        <template #center>
          <span style="font-size: 34rpx; font-weight: bold">
            <slot></slot>
          </span>
        </template>
      </up-navbar>
    </up-sticky>
  </view>
</template>

<script setup>
import { computed, useSlots, onMounted } from "vue";
const isShowLeft = computed(() => {
  const pages = getCurrentPages();
  return pages.length === 1 ? false : true;
});
const backhandle = () => {
  const pages = getCurrentPages();
  if (pages.length === 1) return;
  uni.navigateBack();
};
const root = document.documentElement;
root.style.setProperty(
  "--statusBarHeight",
  `${
    plus.storage.getItem("RunTime") === "app"
      ? plus.navigator.getStatusbarHeight()
      : 0
  }px`
);
</script>

<style lang="scss" scoped>
.status_bar {
  height: var(--status-bar-height);
}
:deep(.u-status-bar) {
  margin-top: var(--statusBarHeight);
}
@mixin flex($direction: row) {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: $direction;
}
</style>