头部组件

components/footer_common.vue

@@ -27,7 +27,7 @@
 	export default {
 		methods: {
 			navigateTo(page) {
-				uni.switchTab({
+				uni.redirectTo({
 					url: `/pages/${page}/index`,
 					success: () => {},
 					fail: () => {},

components/header_common.vue

@@ -0,0 +1,91 @@
+<template>
+	<view class="header">
+		<view class="header-content">
+			<view class="left" @click="goBack">
+				<u-icon name="arrow-left" color="#fff" size="36rpx"></u-icon>
+			</view>
+			<view class="center">
+				<text class="title">{{ title }}</text>
+			</view>
+			<view class="right">
+				<!-- 右侧占位 -->
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			title: {
+				type: String,
+				default: '标题'
+			}
+		},
+		methods: {
+			goBack() {
+				let  pages = getCurrentPages(); // 获取页面栈
+				console.log("-----pages",pages)
+				if (pages.length > 1) {
+					// 如果页面栈深度大于 1，说明可以返回上一页
+					uni.navigateBack({
+						delta: 1
+					});
+				} else {
+					// 如果已经是首页，可以选择跳转到某个指定页面或不做任何操作
+					uni.showToast({
+						title: '已经是首页了',
+						icon: 'none'
+					});
+				}
+
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.header {
+		background-color: transparent;
+		/* 蓝色背景 */
+		padding: 20rpx 30rpx;
+		position: fixed;
+		top: 90rpx;
+		left: 0;
+		right: 0;
+		z-index: 999;
+
+		.header-content {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			.left {
+				flex: 1;
+				display: flex;
+				align-items: center;
+
+				.back-icon {
+					width: 40rpx;
+					height: 40rpx;
+				}
+			}
+
+			.center {
+				flex: 2;
+				text-align: center;
+
+				.title {
+					color: #2e2e2e;
+					font-size: 36rpx;
+					// font-weight: bold;
+				}
+			}
+
+			.right {
+				flex: 1;
+				text-align: right;
+			}
+		}
+	}
+</style>