uniapp H5 handwritten title component (return button in the upper left corner with jump page function (can jump to tabbar and ordinary pages)) + adapted to different models (notification bar)

Components↓

 Project structure: ↓

Note: You need to hide the title of the h5 page in page.json

		{
			"path": "pages/main/main",
			"style": {
				"navigationBarTitleText": "首页",
				"app-plus": {
					"titleNView": false,
					"bounce": "none"
				}

			}

↓Component code

<template>
	<view class="topTitle" :style="[{'padding-bottom': statusBarH/2 + 'px', 'padding-top': statusBarH + 'px'}]">
		<view class="content-icon">
			<uni-icons type="back" v-if="isShow" size="30" style="color:#5861d0" @click="goBack"></uni-icons>
		</view>

		<view class="content-title">{
   
   {title}}</view>
	</view>
</template>

<script>
	export default {
		props: {
			parentPagePath: {
				type: String,
				required: false
			},
			isTabBar: {
				type: Boolean,
				required: false,
				default: false
			},
			isShow: {
				type: Boolean,
				required: false,
				default: true
			}
		},
		data() {
			return {
				title: '',
				customBarH: '',
				statusBarH: '',
			};
		},
		created() {
			let self = this;
			uni.getSystemInfo({
				success: function(e) {
					self.statusBarH = e.statusBarHeight + 10
				}
			})
		},
		methods: {
			goBack() {

					uni.$emit('refresh', {
						refresh: true
					})
				if (this.isTabBar) {
				
					//如果当前页是tabBar页需要跳转到另一个tabBar页 需要用uni.switchTab返回
					if (this.parentPagePath == "/pages/main/main") {
						this.$store.commit('setType', "mainPage");
					}
					uni.switchTab({
						url: this.parentPagePath
					})

				} else {
					//如果是普通页面 跳转到tabBar 或者普通页面跳转到普通页面 可以用uni.navigateBack
					uni.navigateBack({
						delta: 1, //返回层数，2则上上页
					})

				}

			}
		},
		mounted() {
			this.title = uni.getStorageSync('PROJECT_TITLE')
		},
		onLoad() {
			this.title = uni.getStorageSync('PROJECT_TITLE')
		}

	}
</script>

<style lang="scss" scoped>
	.topTitle {
		max-height: 75px;
		width: 100vw;
		background-color: white;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		z-index: 999;
		.content-icon {
			max-height: 100rpx;
			line-height: 100rpx;
			width: 50rpx;
		}
		.content-title {
			position: relative;
			left: calc(50% - 225rpx);
			width: 400rpx;
			font-size: 40rpx;
			font-weight: 600;
			text-align: center;
		}
	}
</style>

Usage method 1↓ You need to pass a path (if the current page is a tabBar page and you need to jump to another tabBar page, you need isTabBar to be true and configure parentPagePath)

<topTitle   :isTabBar = 'true' parentPagePath="/pages/main/main"></topTitle>

Usage method 2↓ If a normal page jumps to a tabBar or a normal page jumps to a normal page, you can use uni.navigateBack and no setting is required.

<topTitle ></topTitle>

Use full code ↓

<template>
	<view class="about">
		<topTitle ></topTitle>

		
	</view>
</template>

<script>

	export default {
		data() {
			return {
			
				
			}
		},
	// 如果是要返回的页面
	// 	onShow: function() {
	// 		let self = this;
	// 		uni.$on("refresh", (data) => {
	// 			if (data.refresh) {
	// 				self.loadData();
	// 			}
	// 		});
	// 		// uni.hideTabBar();
	// 		this.loadData();
	// 	},
	// 	onUnload: function() {
	// 		uni.$off("refresh"); // 需要手动解绑自定义事件
	// 	},
		onShow() {
			
					uni.setStorageSync("PROJECT_TITLE", "查询");
		},
		onLoad(options) {

		},
		methods: {
		
		}
	}
</script>
<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.content {
		height: auto;

		.title-box {
			width: 100vw;
			background-color: white;
		}
	}
</style>