WeChatAppH5/components/nav-bar/nav-bar.vue

<template>
	<uni-nav-bar :title="title" :left-text='leftText' :right-text='rightText' :left-icon="goBack ? leftIcon : ''"
		:right-icon="rightIcon" :color="color" :backgroundColor="backgroundColor" :fixed="fixed" :statusBar="statusBar"
		:border="border" :shadow="shadow" :height="height" :dark="dark" :leftWidth="leftWidth" :rightWidth="rightWidth"
		:stat="stat" @clickRight="onClickRight" @clickLeft="onClickLeft" @clickTitle="onClickTitle">
		<template v-slot:default>
			<slot name="default" />
		</template>
		<template v-slot:left>
			<slot name="left" />
		</template>
		<template v-slot:right>
			<slot name="right" />
		</template>
	</uni-nav-bar>
</template>

<script>
	// https://uniapp.dcloud.net.cn/component/uniui/uni-nav-bar.html
	const app = getApp().globalData;
	export default {
		name: "nav-bar",
		props: {
			// 是否显示返回按钮
			goBack: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: ''
			},
			leftText: {
				type: String,
				default: ''
			},
			rightText: {
				type: String,
				default: ''
			},
			leftIcon: {
				type: String,
				default: 'back'
			},
			rightIcon: {
				type: String,
				default: ''
			},
			color: {
				type: String,
				default: app.navBarFsColor || '#000000',
			},
			backgroundColor: {
				type: String,
				default: app.navBarBgColor || '#FFFFFF'
			},
			fixed: {
				type: Boolean,
				default: true
			},
			statusBar: {
				type: Boolean,
				default: true
			},
			shadow: {
				type: Boolean,
				default: false
			},
			border: {
				type: Boolean,
				default: false
			},
			height: {
				type: [Number, String],
				default: app.navBarHeight || 44,
			},
			dark: {
				type: Boolean,
				default: false
			},
			leftWidth: {
				type: [Number, String],
				default: "120rpx",
			},
			rightWidth: {
				type: [Number, String],
				default: "120rpx",
			},
			stat: {
				type: Boolean,
				default: false,
			},
			// 返回配置
			backCallBack: {
				type: Function,
				default: null,
			},
			// tab 页面
			backTabPage: {
				type: String,
				default: '',
			},
			// 需要返回的普通页面
			backPage: {
				type: String,
				default: '',
			},
		},
		// :backgroundColor="navBarBgColor" :color="navBarFsColor"
		data() {
			return {

			};
		},
		methods: {
			onClickLeft() {
				if (!this.goBack) return
				console.log('点击 nav 左侧')
				try {
					const pages = getCurrentPages();
					const path = pages[pages.length - 1].route;
					// 自定义返回事件
					if (this.backCallBack) {
						this.backCallBack()
					} else if (this.backTabPage) {
						// 需要返回的 Tab 页面
						uni.switchTab({
							url: this.backTabPage,
							fail: () => {
								throw new Error()
							}
						});
					} else if (this.backPage) {
						// 需要返回的 普通 页面
						uni.redirectTo({
							url: this.backPage,
							fail: () => {
								throw new Error()
							}
						});
					} else if (path === 'pages/login/index') {
						// 如果是登录页面，直接返回首页
						throw new Error()
					} else if (pages.length > 1) {
						// 返回上一页
						uni.navigateBack({
							fail: () => {
								throw new Error()
							}
						});
					} else {
						// #ifdef H5
						history.back();
						// #endif
						throw new Error()
					}
				} catch (e) {
					// 返回过程中出错，直接返回首页
					uni.reLaunch({
						url: '/pages/home'
					});
				}
			},
			onClickRight() {
				console.log('点击 nav 右侧')
				this.$emit("clickRight");
			},
			onClickTitle() {
				this.$emit("clickTitle");
			}
		}
	}
</script>

<style lang="scss" scoped>
::v-deep .uni-navbar__content{
	// background-color: red  ;
	// background: url("@/static/images/page-bg.png") no-repeat center center;
	// background-size: 100% 100%;
 
}
</style>