NDAid/components/navbar.vue

<template>
	<view>
		<view class="head" :style="{ height: height + 'px', background:background}">
			<!-- <view 
			class="back"
			@click="back"
			v-if="backShow"
			:style="{ 
				top: top + 'px',
				color:color,
				fontSize:'24rpx'
			}">〈 {{backtext}}</view> -->
			<view
			class="back"
			@click="back"
			v-if="backShow"
			:style="{ 
				top: top + 'px',
				color:color,
				fontSize:'30rpx',
				textAlign:'center',
			}">〈 </view>
			<view
			class="title"
			v-if="titleShow"
			:style="{
				top: top + 'px',
				color:color,
				'font-size': size + 'rpx'
			}">{{title}}</view>
		</view>
	</view>
</template>

<script>
import { getCurrentInstance } from 'vue';
	export default {
		name:"navbar",
		props: {
			backtext: {
				type: String,
				default: '返回'
			},
			title: {
				type: String,
				default: '自定义标题'
			},
			size:{
				type: Number,
				default: 32
			},
			color:{
				type: String,
				default: '#000'
			},
			titleShow: {
				type: Boolean,
				default: true
			},
			backShow: {
				type: Boolean,
				default: true
			},
			background:{
				type: String,
				// default: "linear-gradient(to right, #43e97b 0%, #38f9d7 100%)"
				default:"#3f73b3"
			}
		},
		data() {
			return {
				height :32,
				top:0,
			}
		},
		created() {
			//设备信息
			let app = uni.getSystemInfoSync();
			console.log('设备信息',app)
			// #ifdef APP-PLUS
			this.top = app.safeArea.top
			this.height = 64 + app.safeAreaInsets.bottom
			//#endif
			
			// #ifdef MP-WEIXIN
			
				//胶囊信息
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				this.height  = app.statusBarHeight + menuButtonInfo.height + (menuButtonInfo.top - app.statusBarHeight)*2
				this.top = menuButtonInfo.top;
			//#endif
			
		},
		methods: {
			back(){
				console.log('点击头部返回')
				let page = getCurrentPages();
				let beforPage = page[page.length-2]
				uni.navigateBack({
					success() {
						beforPage.onShow();
					}
				});
			}
		}
	}
</script>

<style>
.head{
	position: fixed;
	width: 100vw;
	z-index: 999;
	padding: 0.5em;
	top:0;
	left:0;
}
.title{
	position: fixed;
	/* width: 750rpx; */
	width: 100%;
	text-align: center;
	line-height: 32px;
	height: 32px;
}
.back{
	position: fixed;
	/* width: 81rpx; */
	text-align: center;
	line-height: 32px;
	height: 32px;
	font-size: 32rpx;
	/* font-weight: 200; */
	z-index: 9;
}
</style>