MiniScm/components/navigateBar/navigate-bar.vue

<template>
	<view class="uni-pages">
		<view class="navigation" :style="{'background-color': bgcolor}">
			<!-- 自适应不同的手机机型，导航顶部留白部分 -->
			<view class="nav--bar-top" :style="{'height':menuButton.top +'px'}"></view>

			<!-- 导航栏中间部分 -->
			<view class="nav-bar-inner">
				<!-- 导航左边部分，是否显示操作胶囊 -->
				<view class="image-box" v-if="control === 'back'"
					:style="{'height':menuButton.height+'px','width':menuButton.width+'px'}">
					<image class="image" src="/static/arrow-left.svg" @click="clickBack"></image>
					<view class="image"></view>
				</view>
				<view class="image-box" v-else-if="control === 'back|home'"
					:style="{'height':menuButton.height+'px','width':menuButton.width+'px'}">
					<image class="image" src="/static/arrow-left.svg" @click="clickBack"></image>
					<view class="line"></view>
					<image class="image" src="/static/home.svg" @click="clickHome"></image>
				</view>
				<view class="image-box" v-else-if="control === 'home'"
					:style="{'height':menuButton.height+'px','width':menuButton.width+'px'}">
					<image class="image" src="/static/home.svg" @click="clickHome"></image>
				</view>
				<view class="base-box" :style="{'height':menuButton.height+'px','width':menuButton.width+'px'}" v-else>
				</view>
				<!-- 中间文字部分，可设置字体颜色 -->
				<view class="title" :style="[titleStyle]">{{title}}</view>
				<!-- 右边部分，占据小程序系统胶囊位置 -->
				<view class="base-box" :style="{'height':menuButton.height+'px','width':menuButton.width+'px'}"></view>
			</view>

			<!-- 设置胶囊离内容距离 -->
			<view class="nav-bar-buttom" style="height: 8px;"></view>
		</view>
	</view>
</template>

<script>
	import props from "./props"
	export default {
		mixins: [props],
		data() {
			return {
				menuButton: {},
				prevLength: 0,
			}
		},
		computed: {
			titleStyle() {
				let style = {}
				style.color = this.color
				return style
			}
		},
		methods: {
			//获取跳转页面的路径，用于返回操作
			getPrevPage() {
				const page = getCurrentPages()
				// console.log("page", page);
				this.prevLength = page.length;
				if (page.length == 2) {
					uni.setStorageSync("prevPage", page[0].$page.fullPath)
				}
			},
			// 胶囊--返回
			clickBack() {
				if (this.prevLength > 2) {
					uni.navigateBack()
				} else {
					let firstPage = uni.getStorageSync("prevPage")
					let split = firstPage.split('/')
					if (split[1] == 'pages' && split[2] !== "login") {
						uni.switchTab({
							url: firstPage,
							success: function() {
								var page = getCurrentPages().pop();
								if (page == undefined || page == null) {
									return
								}
								page.onLoad();
							}
						});
					} else {
						uni.navigateBack()
					}
				}
			},
			// 胶囊--首页
			clickHome() {
				uni.switchTab({
					url: "/pages/home/home"
				});
			}
		},
		beforeMount() {
			// 在挂载时获取不同机型胶囊按钮对应的属性值（宽高，胶囊距离顶部的距离）
			this.menuButton = uni.getMenuButtonBoundingClientRect()
			// console.log("this.menuButton", this.menuButton);
			this.getPrevPage();
		},
	}
</script>

<style lang="scss" scoped>
	.uni-pages {
		.navigation {
			.nav-bar-inner {
				height: 32px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 8px;

				.image-box {
					display: flex;
					justify-content: space-around;
					align-items: center;

					.line {
						width: 1px;
						height: 26px;
						background-color: rgba(#fff, 0.3);
					}

					.image {
						width: 26px;
						height: 26px;
					}
				}

				.title {
					font-weight: 500;
					font-size: 36rpx;
				}
			}

			.nav-bar-buttom {
				height: 10rpx;
			}
		}
	}
</style>