hotelHomestayWx/components/uNavBar1/index2.vue

<template>
	<u-navbar class="nav" :title="title" :leftIconSize="36" bgColor="#111" leftIconColor="#111"
		:titleStyle="titleStyle">
		<view class="u-nav-slot" slot="left">
			<u-icon name="arrow-left" size="44" color='#111' @tap="toBack(backUrl)"></u-icon>
			<u-line v-if="showHome" direction="column" color='#111' :hairline="false" length="0"
				margin="0 15rpx"></u-line>
			<u-icon v-if="showHome" name="home" color='#111' size="48" @tap="toHome"></u-icon>
		</view>
	</u-navbar>
</template>

<script>
	export default {
		options: {
			styleIsolation: 'shared'
		},
		props: {
			title: {
				typeof: String,
				default: ''
			},
			showHome: {
				typeof: Boolean,
				default: true
			},
			backUrl: {
				typeof: String,
				default: ''
			}
		},
		data() {
			return {
				titleStyle: {
					fontSize: '36rpx',
					fontWeight: "bold",
					color: "#111111"
				},
				tabUrls: [
					'/pages/index/index',
					'/pages/touristMap/index',
					'/pages/oneCodePass/index',
					'/pages/service/index',
					'/pages/my/index'
				]
			}
		},
		methods: {
			toBack(url) {
				console.log(url, 'url');
				if (!url) {
					let canNavBack = getCurrentPages();
					if (canNavBack && canNavBack.length > 1) uni.navigateBack();

					else uni.navigateBack({
						url
					});
				} else {
					if (this.tabUrls.find(u => u == url)) uni.navigateBack({
						url
					});
					else uni.navigateBack({
						url
					});
				}
			},
			toHome() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	::v-deep .u-nav-slot {
		display: flex;
		padding: 8rpx 16rpx;
		width: 150rpx;
		background-color: rgba(0, 0, 0, 0.2);
		border-radius: 30rpx;
		color: #111 !important;
	}

	.nav {
		color: #111;
		background-color: transparent;
	}

	.u-navbar__content {
		color: #111 !important;
		background-color: transparent !important;
	}

	.u-status-bar {
		color: #111 !important;
		background-color: transparent !important;
	}

	.u-navbar__content__title {
		color: #111 !important;
	}
</style>