hotelHomestayWx/components/uNavBar/index.vue

<template>
	<view>
	<u-navbar :title="title" :bgColor="bgColor" :titleStyle="titleStyle">
		<view class="u-nav-slot" slot="left" style="display: flex;">
			<u-icon v-if="showIcon" name="arrow-left" size="44" :color="leftIconColor" @tap="toBack(backUrl)"></u-icon>
			<u-line v-if="showHome&&showIcon" direction="column" :hairline="false" length="0" margin="0 15rpx"></u-line>
			<u-icon v-if="showHome&&showIcon" name="home" size="48" :color="leftIconColor" @tap="toHome"></u-icon>
		</view>
	</u-navbar>
	<!-- 底部渐变色 -->
	<view class="bottomBg" :style="{'height':mt+'px'}" v-if="bgColor=='transparent'"></view>
	</view>
</template>

<script>
	export default {
		options: {
			styleIsolation: 'shared'
		},
		props: {
			title: {
				typeof: String,
				default: ''
			},
			showIcon: {
				typeof: Boolean,
				default: true
			},
			showHome: {
				typeof: Boolean,
				default: true
			},
			backUrl: {
				typeof: String,
				default: ''
			},
			bgColor: {
				typeof: String,
				default: '#ffffff'
			},
			leftIconColor: {
				typeof: String,
				default: '#111111'
			},
			titleStyle: {
				typeof: Object,
				default: {
					fontSize: '34rpx',
					fontWeight: "bold",
					color: '#111111'
				}
			},
		},
		data() {
			return {
				tabUrls: [
					'/pages/home/index',
					'/pages/house/index',
					'/pages/statistics/index',
					'/pages/my/index'
				]
			}
		},
		methods: {
			toBack(url) {
				if (!url) {
					if (uni.getStorageSync('options')) {
						uni.redirectTo(JSON.parse(decodeURIComponent(uni.getStorageSync('options'))));
						return uni.removeStorageSync('options');
					}
					let canNavBack = getCurrentPages();
					if (canNavBack && canNavBack.length > 1) uni.navigateBack();
					else uni.reLaunch({
						url: '/pages/home/index'
					})
				} else {
					if (this.tabUrls.find(u => u == url)) uni.reLaunch({
						url
					});
					else uni.redirectTo({
						url
					});
				}
				this.$emit('goBack',url)
			},
			toHome() {
				uni.reLaunch({
					url: '/pages/home/index'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	::v-deep .u-nav-slot {
		display: flex !important;
	}

	.u-navbar--fixed {
		z-index: 99999 !important;
	}
	.bottomBg{
		background: linear-gradient(to bottom,#E7F1FF,#fff);
		position: fixed;
		width: 100%;
		z-index: 10;
		top:0;
	}
</style>