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>