teaching-uniapp/components/statusBar/statusBar.vue

<template>
	<view class="" :style="{height:navheight + 'px',width:750 + 'px'}">
		<view class="statusBar" style="">
			<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>
				</view>
				<view class="navTit" :style="{paddingTop:navTop+ 'px',lineHeight:meunButtonInfo+'px'}">
					<view class="postTit" @click="switchTab(index)">{{item.title}} </view>
				</view>
				
			</view>
		</view>
	</view>
	
</template>

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

<style lang="scss">
	.statusBar{
		position: fixed;
		z-index: 10;
		.nav{
			width: 750rpx;
			position: relative;
			// border-bottom-left-radius: 30rpx;
			// border-bottom-right-radius: 30rpx;
			background-color: #FFFFFF;
			// background: linear-gradient( 100deg ,#65cff4 20%,#c8b8ee 80%);
			position: sticky;
			top: 0;
			// z-index: 1;
			.backBtnSty{
				// position: absolute;
				width: 40rpx;height: 40rpx;		
				margin-left: 15rpx;
				margin-top:50rpx;
				image{
					width: 40rpx;height: 40rpx;
				}
			}
			.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: #000;
					font-weight: bold;
					display: inline-block; /* 将容器设置为行内块元素 */
					vertical-align: bottom; /* 将文字垂直对齐到底部 */
				}
			}
		}
		 .tab-item-active {
		    color: #FFFFFF !important;
			font-size: 18px;
			font-weight: bold;
		  }
	}
</style>