uniapp+vue2+uview2.0导航栏组件二次封装

样式

代码

<template>
	<view class="navBar">
		<u-navbar :title="title" :titleColor="titleColor" :bgColor="bgColor" :safeAreaInsetTop="safeAreaInsetTop"
			:autoBack="true" @leftClick="leftClick" @rightClick="rightClick">
			<view class="u-nav-slot" slot="left">
				<u-icon name="arrow-left" size="19" v-if="isSubPage"></u-icon>
				<u-icon name="home" size="20" v-if="!isSubPage"></u-icon>
			</view>
		</u-navbar>
		<view style="height: 46px;" v-if="!placeholder"></view>
	</view>
</template>

<script>
	/**
	 * NavBar导航
	 * @description 二次封装u-navbar
	 * @property {Boolean}			safeAreaInsetTop		是否开启顶部安全区适配
	 * @property {Boolean}			placeholder				固定在顶部时，是否生成一个等高元素，以防止塌陷
	 * @property {Boolean}			fixed				    导航栏是否固定在顶部
	 * @property {Boolean}			border				    导航栏底部是否显示下边框
	 * @property {String}			leftIcon				左边返回图标的名称
	 * @property {String}			leftText				左边的提示文字
	 * @property {String}			rightText				右边的提示文字
	 * @property {String}			rightIcon				右边返回图标的名称，只能为uView自带的图标
	 * @property {String}			title		            导航栏标题
	 * @property {String}			bgColor				    导航栏背景设置
	 * @property {String | Number}	titleWidth			    导航栏标题的最大宽度，内容超出会以省略号隐藏，单位rpx
	 * @property {String | Number}	height				    导航栏高度(不包括状态栏高度在内，内部自动加上)单位px
	 * @property {String | Number}	leftIconSize			左侧返回图标的大小
	 * @property {String}			leftIconColor			左侧返回图标的颜色
	 * @property {Boolean}			autoBack2.0.19		    点击左侧区域(返回图标)，是否自动返回上一页
	 * @property {String | Object}	titleStyle 2.0.23		标题的样式，对象或字符串形式
	 * @event {Function}			leftClick				点击左侧区域触发
	 * @event {Function}			rightClick				点击右侧区域触发
	 * @example <navBar title="首页"/></navBar>
	 */

	export default {
		name: "navBar",
		props: {
			title: {
				type: String,
				default: '娱乐'
			},
			titleColor: {
				type: String,
				default: '#000000'
			},
			bgColor: {
				type: String,
				default: '#ffffff'
			},
			safeAreaInsetTop: {
				type: Boolean,
				default: false
			},
			placeholder: {
				type: Boolean,
				default: false
			},
			fixed: {
				type: Boolean,
				default: true
			},
			border: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				isSubPage: false, // 新增状态
			};
		},
		methods: {
			// 点击左侧区域
			leftClick() {
				if (this.isSubPage) {
					uni.navigateBack();
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					}); 
				}
				this.$emit('leftClick');
			},
			// 点击右侧区域
			rightClick() {
				this.$emit('rightClick');
			},
		},
		mounted() {
			// 检查当前页面是否为二级页面
			let pages = getCurrentPages()
			this.isSubPage = pages.length > 1;
		}
	}
</script>

<style lang="scss" scoped></style>