圖例：紅框區(qū)域，使其標(biāo)題區(qū)與膠囊對(duì)齊

一、組件 navigation.vue

<template>
	<view class="nav_name">
		<view class="nav-title" :style="{
				'color' : props.color, 
				'padding-top' : top+'rpx',
				'background' : props.bgColor,
				'height' : tops+'rpx',
				'line-height' : tops+'rpx'
			}">
			<view v-if="props.isReturn===0" class="nav-back" @click="returns()">
				<image src="@/static/report/back_icon.png" mode=""></image>
			</view>
			<view v-else-if="props.isReturn===1" class="nav-back nav-icon" @click="returns()">
				<image :src="props.returnIcon" mode=""></image>
			</view>
			<view v-else class="nav-back"></view>
			<view class="nav-name" :style="{'text-align':props.isCenter?'center;':'left;'}">{{props.title_name}}</view>
		</view>
		<view :style="{height: top+tops+'rpx'}"></view>
	</view>
</template>
 
<script setup>
import { defineProps,ref } from 'vue'
import { onLoad, onShow } from "@dcloudio/uni-app";
const props = defineProps({
	title_name:{  // 標(biāo)題名
		type:String,
		required: true
	},
	isReturn:{  // 0是返回鍵  1自定義傳的圖標(biāo) >1是不傳任何圖標(biāo)
		type:Number,
		required: true
	},
	returnIcon:{  // 定義傳遞的圖標(biāo)地址
		type:String,
		required: true
	},
	color:{ // 文字顏色
		type:String,
		required: true
	},
	bgColor :{ // 背景顏色
		type:String,
		required: true
	},
	isCenter:{ // 文字是否居中
		type:Boolean,
		required: true
	}
})

const isLast=ref(false)
const top=ref(0)
const tops=ref(100)
const emit = defineEmits(['iconClick'])

onShow(()=>{
	getLast()
	getTopWeiXin()
})

// 返回的箭頭
const returns=()=>{
	if(props.isReturn===0){
		if(isLast.value){
			uni.switchTab({
				url:'/pages/index/index' //返回首頁(yè)
			})
		}else{
			uni.navigateBack({
				delta: 1  //返回上一頁(yè)
			});
		}
	}else if(props.isReturn===1){
		// 自定義圖標(biāo)操作
		emit('iconClick')
	}
}
// 獲取小程序安全區(qū)域的高度
const getTopWeiXin=()=>{
	top.value = parseInt(uni.getSystemInfoSync().statusBarHeight * 750 / uni.getSystemInfoSync().windowWidth) 
	uni.setStorageSync('top', top.value);
}
// 獲取有無(wú)上一頁(yè)
const getLast=()=>{
	let pages = getCurrentPages();//當(dāng)前頁(yè)
	if(pages.length == 1){
		isLast.value = true
	}else{
		isLast.value = false
	}
}
</script>
 
<style lang="scss" scoped>
.nav_name{
	.nav-title{
		position: fixed;
		z-index: 999;
		width: 750rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		overflow: hidden;
		.nav-back{
			width: 60rpx;
			position: absolute;
			left: 0;
			z-index: 999;
			margin-left: 20rpx;
			margin-top: 8rpx;
			image{
				width: 36rpx;
				height: 36rpx;
			}
		}
		.nav-icon{
			margin-top: 20rpx;
			image{
				width: 46rpx !important;
				height: 46rpx !important;
			}
		}
		.nav-name{
			width: 560rpx;
			text-align: center;
			font-weight: bold;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			word-break: break-all;
		}
	}
}
</style>

二、頁(yè)面調(diào)用

<template>
<Navigation :title_name="'6-25考試新增學(xué)生測(cè)試'"
        :isReturn="0"
        :color="'#000000'"
        :bgColor="'#FFFFFF'"
		:isCenter="false"/>
</template>
<script setup>
import Navigation from '@/components/navigation/index.vue'
</script>

三、pages.json 相關(guān)設(shè)置

// 如果背景色是白色, 需要設(shè)置 pages.json 中頂部文字顏色為黑色，顯示手機(jī)自帶的信息

"globalStyle": {
	"navigationBarTextStyle": "black",
	"navigationBarTitleText": "遠(yuǎn)端小程序",
	"navigationBarBackgroundColor": "#F8F8F8",
	"backgroundColor": "#F8F8F8"
}

? ? ?希望我的愚見(jiàn)能夠幫助你哦~，若有不足之處，還望指出，你們有更好的解決方法，歡迎大家在評(píng)論區(qū)下方留言支持，大家一起相互學(xué)習(xí)參考呀~文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-671871.html

到了這里，關(guān)于使用 uniapp 適用于wx小程序 - 實(shí)現(xiàn)移動(dòng)端頭部的封裝和調(diào)用的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！