lanan-repair/components/VNavigationBar.vue

<template>
	<!-- header -->
	<view :style="{ backgroundColor, paddingTop: homeHeaderPaddingTop + 'px', height: homeHeaderMenuHeight + 'px' }"
		class="navigationBar" :class="{leftTitle: leftTitle}">
		<template v-if="leftTitle">
			<view class="navigationBarTitle" :style="{ color: titleColor }">
				{{ title ? title : '' }}
			</view>
		</template>
		<template v-else>
			<view class="navigationBarBack" @click="back" >
				<slot name="back">
					<uni-icons size="24" type="left"
						:color="titleColor"></uni-icons>
				</slot>
			</view>
			<view class="navigationBarTitle" :style="{ color: titleColor }">
				{{ title }}
			</view>
			<view v-if="showClear" @click="clearNoReadFun" class="navigationBarIcon" :style="{ color: titleColor }">
        <image src="@/static/images/clear.jpg" mode="" class="clear-icon"></image>
			</view>
		</template>
		<view class="navigationBarBackExtra">
			<slot name="extra">
				</slot>
		</view>
	</view>
</template>

<script>
	/* 计算标题位置 */
	import {
		getWXStatusHeight
	} from "@/utils/utils";

	export default {
		props: {
			backgroundColor: {
				type: String,
				default: '#317DFA'
			},
			title: String,
			titleColor: {
				type: String,
				default: '#fff'
			},
			leftTitle: {
				type: Boolean,
				default: false
			},
			showClear: {
				type: Boolean,
				default: false
			}
		},
		mounted() {
			// #ifdef MP
			const {
				barHeight,
				barTop,
				menuButtonLeft
			} = getWXStatusHeight()
			console.log('barHeight, barTop, menuButtonLeft: ', barHeight, barTop, menuButtonLeft);
			this.homeHeaderPaddingTop = barTop || 0
			this.homeHeaderMenuHeight = barHeight
			this.homeHeaderMenuLeft = menuButtonLeft - 6
			// #endif
		},
		data() {
			return {
				// #ifdef MP
				homeHeaderPaddingTop: 0,
				homeHeaderMenuHeight: 0,
				homeHeaderMenuLeft: 0,
				// #endif
				// #ifdef APP || H5
				homeHeaderPaddingTop: 20,
				homeHeaderMenuHeight: 50,
				homeHeaderMenuLeft: 0
				// #endif
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
      clearNoReadFun(){
			  this.$emit('clearNoRead')
      }
		}
	}
</script>

<style lang="scss" scoped>
	.navigationBar {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;

		&.leftTitle {
			justify-content: start;
			padding-left: 28rpx;
		}

		.navigationBarBack {
			position: absolute;
			left: 20rpx;
		}

		.navigationBarBackExtra {
			position: absolute;
			right: 20rpx;
		}

		.navigationBarTitle {
			font-size: 36rpx;
			font-weight: bold;
		}
		.navigationBarIcon {
      display: flex;
		}
    .clear-icon{
      width: 40rpx;
      height: 40rpx;
      border-radius: 50%;
    }
	}
</style>