更新

components/tabBar/VNavigationBar.vue

@@ -0,0 +1,131 @@
+<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="22px" 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/imgs/clear.png" 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: 30rpx;
+		}
+
+		.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>