teaching-uniapp/components/statusBar/statusBar.vue

<template>
		<view class="statusBar" :style="{height: meunButtonInfo? navheight + 'px': customBar +'px'}">
			<view class="nav" v-if="meunButtonInfo" :style="{height:navheight + 'px'}">
				<view v-if="item.btn" class="backBtnSty" style="position: fixed;transform: translate(0,-50%);" :style="{width:'30px',marginTop:navTop+meunButtonInfo/2 +'px'}">
					<!-- <image @click="backIndex" src="../../static/logo.png" mode="aspectFill"></image> -->
					<uni-icons @click="backIndex" type="back" size="25"></uni-icons>
				</view>
				<view class="navTit" :style="{paddingTop:navTop+ 'px',lineHeight:meunButtonInfo+'px'}">
					<view class="postTit">{{item.title}} </view>
				</view>
			</view>
			<!-- app端 -->
			<view class="nav" v-else :style="{height:customBar +'px'}">
					<view v-if="item.btn" class="backBtnSty" style="position: fixed;transform: translate(0,-50%);" :style="{width:'30px',marginTop:appAllHeight/2 +'px'}">
						<!-- <image @click="backIndex" src="../../static/img/back.png"  mode="aspectFill"></image> -->
						<uni-icons @click="backIndex" type="back" size="20"></uni-icons>
					</view>
					<!-- 导航栏文字开始 -->
					<view class="navTit" :style="{lineHeight:customBar+'px'}">
						<view class="postTit">{{item.title}} </view>
					</view>
					<!-- 导航栏文字结束 -->
			</view>
	</view>
	
</template>

<script>
	export default {
		name:"statusBar",
		props:{ 
			item:{
				type:Object,
				default(){
					return{
						title:'',
						btn:1  //判断是否显示返回按钮 0不显示 1显示 2返回首页
					}
					
				}
			}
		},
		data() {
			return {
				navheight:this.navheight,		//导航栏高度
				statusHeight:this.statusHeight,   //状态栏高度
				navTop:this.navTop,                //胶囊离顶高度
				meunButtonInfo:this.meunButtonInfo, //胶囊高度
				
				appAllHeight:this.customBar,//app导航栏高度
			};
		},
		methods:{
			backIndex(){
				if(this.item.btn==2){
					uni.switchTab({
						url:'/pages/index/index'
					})
					return
				}
				uni.navigateBack()
			}
		},
		onLoad() {
			// console.log(this.meunButtonInfo);
		}
	}
</script>

<style lang="scss">
		.statusBar{
			// background-color: #000;
		}
		.nav{
			width: 750rpx;
			
			background-color: #FFFFFF;
			
			position: fixed;
			top: 0;
			z-index: 11;
			.backBtnSty{
				width: 40rpx;
				height: 40rpx;		
				margin-left: 30rpx;
				margin-top:50rpx;
				image{
					width: 16rpx;height: 28rpx;
				}
			}
			.navTit{
				width: 260rpx;
				height: 44px;
				margin: auto;
				color: #ffffff;
				// font-family: 'Microsoft YaHei';
				text-align: center;
				display: flex;
				justify-content: space-around;
				
				.postTit{
					height: 40px;
					color: rgba(0, 0, 0, 0.88);
					font-size: 34rpx;
					// font-family: Microsoft YaHei;
					font-weight: bold;
					display: inline-block; /* 将容器设置为行内块元素 */
					vertical-align: bottom; /* 将文字垂直对齐到底部 */
				}
			}
		}
		 .tab-item-active {
		    color: #FFFFFF !important;
			font-size: 18px;
			font-weight: bold;
		  }
</style>