uniapp公用返回组件

uniapp写一个公用的头部组件，包含home和返回。

1. 页面中的引用
   
   2.在components文件夹下，新建一个navBar.vue

<template>
	<view class="view-wrap">
		<view :style="{ height: barHeight }"></view>
		<view class="nav-bar-wrap" :style="{ background: background }">
			<view class="status-bar" :style="{ height: statusHeight }"></view>
			<view class="nav-bar" :style="{ padding: menuGap, gap: menuGap, height: menuHeight }">
				<view class="left" v-if="back"
					:style="{ width: menuWidth, height: menuHeight, lineHeight: menuHeight }">
					<uni-icons type="arrow-left" size="20" :color="backColor" @click="handleBack"></uni-icons>
					<uni-icons type="home-filled" size="20" :color="backColor" @click="handleHome"></uni-icons>
				</view>
				<view v-else
					:style="{ width: menuWidth, height: menuHeight, lineHeight: menuHeight }">
				</view>
				<view class="logo-block" v-if="type == 'icon'">
					<image class="logo"
						src="https://img.js.design/assets/img/63eef16e94031f91576975f7.png#6f1b14d0e35a1527a5a6621e0b5125a8">
					</image>
				</view>
				<view :style="{ color: backColor, fontSize: titleFontSize }" v-if="type == 'title'">
					{{ title }}
				</view>
				<view v-if="type == 'slot'" class="container" v-else>
					<slot></slot>
				</view>
				<view class="right" :style="{ width: menuWidth, height: menuHeight }"></view>
			</view>
		</view>
	</view>
</template>

<script>
	const {
		windowWidth,
		statusHeight,
		menuGap,
		menuWidth,
		menuHeight
	} = getApp().globalData
	export default {
		props: {
			background: {
				type: String,
				default: '#ffffff'
			},
			backOption: {
				default: false,
				type: Boolean
			},
			back: {
				type: Boolean
			},
			type: {
				type: String,
				default: 'title'
			},
			title: {
				type: String,
				default: ''
			},
			backColor: {
				type: String,
				default: '#000'
			},
			titleFontSize: {
				type: String,
			},
		},
		data() {
			return {
				barHeight: '32px',
				menuGap: '7px',
				menuWidth: '0px',
				menuHeight: '32px',
				statusHeight: '7px',
				borderRadius: '4px',
				keyWord: '',
			};
		},
		mounted() {
			this.statusHeight = statusHeight + 'px'
			this.menuGap = menuGap + 'px'
			this.menuWidth = menuWidth + 'px'
			this.menuHeight = menuHeight + 'px'
			this.borderRadius = menuHeight / 2 + 'px'
			this.barHeight = statusHeight + menuHeight + menuGap * 2 + 'px'
			uni.setStorageSync('barHeight', this.barHeight)
		},
		computed: {
			barWidth() {
				if (this.back) {
					return windowWidth - menuWidth - menuGap * 4 - 26 + 'px'
				} else {
					return windowWidth - menuWidth - menuGap * 3 + 'px'
				}
			}
		},
		methods: {
			//处理返回
			handleBack() {
				let that = this
				let pages = getCurrentPages();
				let currPage = pages[pages.length - 1]; //当前页面
				let prevPage = pages[pages.length - 2];

				uni.navigateBack({
					delta: 1,
					success: function(e) {
						if (that.backOption) {
							let page = getCurrentPages().pop();
							if (page == undefined || page == null) return;

							page.onLoad();
						}

					}
				})

				uni.$emit('back')
			},
			handleHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.view-wrap {
		position: relative;

	}

	.nav-bar-wrap {
		position: fixed;
		top: 0;
		z-index: 99;
		width: 100%;
		left: 0;
		right: 0;
		// box-shadow: 0px 3px 6px 0px rgba(216, 216, 216, 0.16);

		.nav-bar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: content-box;

			.left {
				// width: 26px;
				// width: 79px;
				border: 0.5px solid rgba(241, 241, 241, 1);
				border-radius: 30px;
				// height: 30px;
				// line-height: 30px;
				flex-shrink: 0;
				display: flex;
				justify-content: space-between;
				padding: 0 13px;
				box-sizing: border-box;
				// text-align: center;
				background-color: rgba(255, 255, 255, 0.8);
			}


			.logo-block {
				// margin-left: 45%;
			}

			.logo {
				width: 34.14px;
				height: 40.48px;

			}

			.container {}


			.right {
				flex-shrink: 0;
			}


		}
	}
</style>

3. 在App.vue中设置全局变量

<script>
	export default {
		globalData: {},
		onLaunch: function() {
			this.initBounding();
		},
		onHide: function() {},
		methods: {
			initBounding() {
				const {
					windowWidth,
					windowHeight,
					statusBarHeight
				} =
				uni.getSystemInfoSync();

				let menuGap = 7;
				let menuWidth = 0;
				let menuHeight = 32;
				let statusHeight = 7;

				// #ifdef MP
				const {
					top,
					left,
					right,
					width,
					height
				} =
				uni.getMenuButtonBoundingClientRect();
				menuGap = windowWidth - right;
				menuWidth = width;
				menuHeight = height;
				statusHeight = top - menuGap;
				// #endif

				// #ifdef APP-PLUS
				statusHeight = statusBarHeight;
				// #endif

				this.globalData.windowWidth = windowWidth;
				this.globalData.windowHeight = windowHeight;
				this.globalData.statusHeight = statusHeight;
				this.globalData.menuGap = menuGap;
				this.globalData.menuWidth = menuWidth;
				this.globalData.menuHeight = menuHeight;

			},
		},
	};
</script>

<style lang="scss">
	@import "@/common/index.scss";
	@import "@/common/common.scss";
	// 设置整个项目的背景色
	page {
		background: #F4F4F4;
		//font-family: "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
		font-family: "Source Han Sans CN", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	}
</style>

4. 在main.js中注册全局组件

import App from './App'
import {formatImage,formatPrice,validatePhoneNumber,validateIDCard} from "@/utils/index.js"
import store from './store'

// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false

Vue.prototype.formatImage = formatImage
Vue.prototype.formatPrice = formatPrice
Vue.prototype.validatePhoneNumber = validatePhoneNumber
Vue.prototype.validateIDCard = validateIDCard
Vue.prototype.$store = store

let onFun = uni.$on;
uni.$on = (eventName,obj) =>{
try {
uni.$off(eventName);
} catch (error) {}
onFun(eventName,obj);
}

App.mpType = 'app'
const app = new Vue({
	store,
  ...App
})
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  // 注册全局组件
  for (let key in components) {
  	app.component(key,components[key])
  }
  return {
    app
  }
}
// #endif

效果图如下

可以返回上一页和home页，也可以配置自己喜欢的颜色。