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',
			paddingTop:headerPadding+'px',
			paddingBottom:headerPadding+'px',
			justifyContent: (isBack?'space-between':'center')
			}">
			<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
			}
		},
		onShow() {
			
		},
		onLoad() {

		},
		methods: {
			init() {
				this.navPaddingTop = api.navHeight().navPaddingTop,
				this.navHeight = api.navHeight().navHeight,
				this.headerPadding = api.navHeight().headerPadding
				console.log('this.navPaddingTop123',this.navPaddingTop);
				console.log('this.navHeight',this.navHeight);
				console.log('this.headerPadding',this.headerPadding);
			},
			navBack(){
				uni.navigateBack({
					delta:1
				});
			}
		},
		created() {
			this.init()
			// onPageScroll:function(e){
			// 	console.log(1);
			// }
		},
		updated() {},
		mounted() {
			var that = this;
			uni.$on('isTop', function(data) {
				that.isTop = data;
			});
		}
	}
</script>

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