pet_uni/components/HeaderNav/index.vue

<template>
	<view class="header" :class="{top:isTop}" :style="{
					paddingTop:navPaddingTop+'px',
				}">
				
		<view class="header-container" :style="{
			height:navHeight+'px',
			justifyContent: (isBack?'space-between':'center'),
			padding:menuButtonPadding+'px 0'
			}">
			<view v-show="isBack" class="header-back-button" @click="navBack()">
				<u-icon name="arrow-leftward"></u-icon>
			</view>
			<view class="header-title">
				{{title}}
			</view>
			<view v-show="isBack" class="header-back-button" style="opacity: 0;">
				<u-icon name="arrow-rightward"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		imghost
	} from '@/config/host.js';
	import api from '@/utils/functions.js';
	export default {
		props:{
			title:{
				type:String,
				default:'汪汪行天下'
			},
			isBack:{
				type:Boolean,
				default:false
			},
		},
		data() {
			return {
				loading: true,
				navHeight: 32,
				navPaddingTop: 47,
				headerPadding:4,
				isTop:true,
        menuButtonPadding:0,
			}
		},
		onShow() {
			
		},
		onLoad() {

		},
		methods: {
			init() {
        let sysInfo = uni.getStorageSync('sysInfo');
				this.navPaddingTop = sysInfo.sysMenuHeight;
				this.navHeight = sysInfo.menuButtonHeight;
        this.menuButtonPadding = sysInfo.menuButtonPadding;
			},
			navBack(){
				uni.navigateBack({
					delta:1
				});
			}
		},
		created() {
			this.init()
		},
		updated() {},
		mounted() {
			let that = this;
			uni.$on('isTop', (data) => {
				that.isTop = data;
			});



    }
	}
</script>

<style lang="scss">
	@import '@/components/HeaderNav/components/index.scss';
</style>