导航组件

components/VNavigationBar.vue

@@ -0,0 +1,73 @@
+<template>
+  <!-- header -->
+  <view :style="{ backgroundColor, paddingTop: homeHeaderPaddingTop + 'px', height: homeHeaderMenuHeight + 'px' }" class="navigationBar">
+    <uni-icons @click="back" class="navigationBarBack" size="24" type="left" :color="titleColor"></uni-icons>
+    <view class="navigationBarTitle" :style="{ color: titleColor }">
+      {{ title }}
+    </view>
+  </view>
+</template>
+
+<script>
+/* 计算标题位置 */
+import {getWXStatusHeight} from "@/utils/utils";
+
+export default {
+	props: {
+		backgroundColor: {
+		  type: String,
+		  default: '#317DFA'
+		},
+		title: String,
+		titleColor: {
+		  type: String,
+		  default: '#fff'
+		}
+	},
+	onLoad() {
+		// #ifdef MP
+		const {barHeight, barTop, menuButtonLeft} = getWXStatusHeight()
+		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({
+				delta: 1,
+			})
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.navigationBar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .navigationBarBack {
+    position: absolute;
+    left: 20rpx;
+  }
+  .navigationBarTitle {
+    font-size: 32rpx;
+  }
+}
+</style>