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>