封裝原因

項目中有時候需要使用自定義的頭部導航欄，原生的無法滿足需求

參數

屬性名	描述	示例
title	標題	字符串：'首頁'
bgColor	背景色	字符串：'#fff'
type	左側的操作內容	字符串：'all'，詳細值請在下方查看

參數解釋

type

• all 有返回和回到首頁
• back 只有返回
• home 只有回到首頁
• none 什么都沒有

注意點

• 組件有一個默認插槽，如果有特殊要求的導航欄可以使用插件進行自定義
• title和type都是默認插槽中內容的值，所以如果你使用了插槽來自定義頭部導航欄的話title和type會失效

代碼

<template><viewclass="navbar-box":style="{ 'background-color': props.bgColor }"v-if="statusBarHeight && navBarHeight"><!-- 狀態欄 --><view :style="{ height: statusBarHeight + 'px' }"></view><!-- 導航欄 --><view :style="{ height: navBarHeight + 'px' }"><slot><div class="navbar-default"><div class="default-left" v-if="props.type != 'none'"><view class="default-all" v-if="props.type == 'all'"><u-icon name="arrow-left" color="#fff" size="20" @click="goBack"></u-icon><view class="default-line"></view><u-icon name="home" color="#fff" size="20" @click="goHome"></u-icon></view><view class="default-back" v-if="props.type == 'back'"><u-icon name="arrow-left" color="#fff" size="20" @click="goBack"></u-icon></view><view class="default-home" v-if="props.type == 'home'"><u-icon name="home-fill" color="#fff" size="20" @click="goHome"></u-icon></view></div><view class="default-title">{{ props.title }}</view></div></slot></view></view><!-- 占位 --><view :style="{ height: statusBarHeight + navBarHeight + 'px' }"></view>
</template>
<script setup>import { ref, onMounted, computed, watchEffect } from 'vue';import { onLoad } from '@dcloudio/uni-app';const props = defineProps({title: {type: String,default: '',},bgColor: {type: String,default: '#fff',},type: {type: String,default: 'all',},});onMounted(() => {geStatusBarHeight();getNavBarHeight();});let statusBarHeight = ref(0);let navBarHeight = ref(0);// 獲取狀態欄高度function geStatusBarHeight() {statusBarHeight.value = uni.getSystemInfoSync()['statusBarHeight'];}// 獲取導航欄高度function getNavBarHeight() {// #ifdef MP-WEIXINlet menuButtonInfo = uni.getMenuButtonBoundingClientRect(); // 膠囊信息// 導航欄高度 = 膠囊高度 + 上間距 + 下間距 + 微調navBarHeight.value =menuButtonInfo.height +(menuButtonInfo.top - uni.getSystemInfoSync()['statusBarHeight']) * 2 +2;// #endif// #ifdef APP-PLUS || H5navBarHeight.value = 44;// #endif}// 返回上一頁function goBack() {const pages = getCurrentPages();if (pages.length == 1) {uni.reLaunch({url: '/pages/home/index',});return;}uni.navigateBack();}// 去首頁function goHome() {uni.reLaunch({url: '/pages/home/index',});}
</script><style lang="scss" scoped>.navbar-box {position: fixed;top: 0;left: 0;width: 100%;z-index: 2000;.navbar-default {height: 100%;display: flex;justify-content: center;align-items: center;position: relative;.default-left {position: absolute;top: 50%;left: 24rpx;transform: translateY(-50%);.default-all {display: flex;justify-content: center;align-items: center;padding: 10rpx 30rpx;background: rgba(0, 0, 0, 0.5);border-radius: 32rpx;.default-line {width: 2rpx;height: 40rpx;background: #afafaf;margin: 0 20rpx;}}.default-back,.default-home {width: 63rpx;height: 63rpx;background: rgba(0, 0, 0, 0.5);border-radius: 50%;display: flex;justify-content: center;align-items: center;}}.default-title {color: #000;font-weight: bold;font-size: 16px;}}}
</style>

?