本文的顶部导航栏为使用uView的导航栏组件------ Navbar 自定义导航栏
（首先先确保HBuilder X已经安装了uView ）
uView里面的导航栏，相比于官方自带的，
会有更多的样式及参数，所以在实际开发中，也可以多使用这个自定义导航栏组件
一、参数
以下是组件的一些参数：
API
#Props
参数 | 说明 | 类型 | 默认值 | 可选值 |
height | 导航栏高度(不包括状态栏高度在内，内部自动加上)，注意这里的单位是px | String | Number | 44 | - |
back-icon-color | 左边返回图标的颜色 | String | #606266 | - |
back-icon-name | 左边返回图标的名称，只能为uView自带的图标， | String | nav-back | - |
back-icon-size | 左边返回图标的大小，单位rpx | String | Number | 30 | - |
back-text | 返回图标右边的辅助提示文字 | String | - | - |
back-text-style | 返回图标右边的辅助提示文字的样式，对象形式 | Object | { color: '#606266' } | - |
title | 导航栏标题，如设置为空字符，将会隐藏标题占位区域 | String | - | - |
title-width | 导航栏标题的最大宽度，内容超出会以省略号隐藏，单位rpx | String | Number | 250 | - |
title-color | 标题的颜色 | String | #606266 | - |
title-size | 导航栏标题字体大小，单位rpx， | String | Number | 44 | - |
z-index | 固定在顶部时的 | String | Number | 980 | - |
is-back | 是否显示导航栏左边返回图标和辅助文字 | Boolean | true | false |
background | 导航栏背景设置(APP和小程序上包括状态栏的颜色)，见上方说明 | Object | { background: '#ffffff' } | - |
is-fixed | 导航栏是否固定在顶部 | Boolean | true | false |
border-bottom | 导航栏底部是否显示下边框，如定义了较深的背景颜色，可取消此值 | Boolean | true | false |
custom-back 1.3.4 | 自定义返回逻辑方法，如传入，点击返回按钮执行函数，否则正常返回上一页，注意模板中不需要写方法参数的括号 | Function | - | - |
immersive 1.5.6 | 沉浸式，允许fixed定位后导航栏塌陷，仅fixed定位下生效 | Boolean | false | true |
title-bold | 导航栏标题字体是否加粗 1.7.8 | Boolean | false | true |
#Slot
名称 | 说明 |
- | 自定义中间部分的内容 |
right | 自定义右侧部分内容 |
详细参数
<script>
// 获取系统状态栏的高度
let systemInfo = uni.getSystemInfoSync();
let menuButtonInfo = {};
// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif
/**
* navbar 自定义导航栏
* @description 此组件一般用于在特殊情况下，需要自定义导航栏的时候用到，一般建议使用uniapp自带的导航栏。
* @tutorial https://www.uviewui.com/components/navbar.html
* @property {String Number} height 导航栏高度(不包括状态栏高度在内，内部自动加上)，注意这里的单位是px（默认44）
* @property {String} back-icon-color 左边返回图标的颜色（默认#606266）
* @property {String} back-icon-name 左边返回图标的名称，只能为uView自带的图标（默认arrow-left）
* @property {String Number} back-icon-size 左边返回图标的大小，单位rpx（默认30）
* @property {String} back-text 返回图标右边的辅助提示文字
* @property {Object} back-text-style 返回图标右边的辅助提示文字的样式，对象形式（默认{ color: '#606266' }）
* @property {String} title 导航栏标题，如设置为空字符，将会隐藏标题占位区域
* @property {String Number} title-width 导航栏标题的最大宽度，内容超出会以省略号隐藏，单位rpx（默认250）
* @property {String} title-color 标题的颜色（默认#606266）
* @property {String Number} title-size 导航栏标题字体大小，单位rpx（默认32）
* @property {Function} custom-back 自定义返回逻辑方法
* @property {String Number} z-index 固定在顶部时的z-index值（默认980）
* @property {Boolean} is-back 是否显示导航栏左边返回图标和辅助文字（默认true）
* @property {Object} background 导航栏背景设置，见官网说明（默认{ background: '#ffffff' }）
* @property {Boolean} is-fixed 导航栏是否固定在顶部（默认true）
* @property {Boolean} immersive 沉浸式，允许fixed定位后导航栏塌陷，仅fixed定位下生效（默认false）
* @property {Boolean} border-bottom 导航栏底部是否显示下边框，如定义了较深的背景颜色，可取消此值（默认true）
* @example <u-navbar back-text="返回" title="剑未配妥，出门已是江湖"></u-navbar>
*/
export default {
name: "u-navbar",
props: {
// 导航栏高度，单位px，非rpx
height: {
type: [String, Number],
default: ''
},
// 返回箭头的颜色
backIconColor: {
type: String,
default: '#606266'
},
// 左边返回的图标
backIconName: {
type: String,
default: 'nav-back'
},
// 左边返回图标的大小，rpx
backIconSize: {
type: [String, Number],
default: '44'
},
// 返回的文字提示
backText: {
type: String,
default: ''
},
// 返回的文字的 样式
backTextStyle: {
type: Object,
default () {
return {
color: '#25AFA2'
}
}
},
// 导航栏标题
title: {
type: String,
default: ''
},
// 标题的宽度，如果需要自定义右侧内容，且右侧内容很多时，可能需要减少这个宽度，单位rpx
titleWidth: {
type: [String, Number],
default: '250'
},
// 标题的颜色
titleColor: {
type: String,
default: '#606266'
},
// 标题字体是否加粗
titleBold: {
type: Boolean,
default: true
},
// 标题的字体大小
titleSize: {
type: [String, Number],
default: 32
},
isBack: {
type: [Boolean, String],
default: true
},
// 对象形式，因为用户可能定义一个纯色，或者线性渐变的颜色
background: {
type: Object,
default () {
return {
background: '#ffffff'
}
}
},
// 导航栏是否固定在顶部
isFixed: {
type: Boolean,
default: true
},
// 是否沉浸式，允许fixed定位后导航栏塌陷，仅fixed定位下生效
immersive: {
type: Boolean,
default: false
},
// 是否显示导航栏的下边框
borderBottom: {
type: Boolean,
default: true
},
zIndex: {
type: [String, Number],
default: ''
},
// 自定义返回逻辑
customBack: {
type: Function,
default: null
}
},
data() {
return {
menuButtonInfo: menuButtonInfo,
statusBarHeight: systemInfo.statusBarHeight
};
},
computed: {
// 导航栏内部盒子的样式
navbarInnerStyle() {
let style = {};
// 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
style.height = this.navbarHeight + 'px';
// // 如果是各家小程序，导航栏内部的宽度需要减少右边胶囊的宽度
// #ifdef MP
let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
style.marginRight = rightButtonWidth + 'px';
// #endif
return style;
},
// 整个导航栏的样式
navbarStyle() {
let style = {};
style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.navbar;
// 合并用户传递的背景色对象
Object.assign(style, this.background);
return style;
},
// 导航中间的标题的样式
titleStyle() {
let style = {};
// #ifndef MP
style.left = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px';
style.right = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px';
// #endif
// #ifdef MP
// 此处是为了让标题显示区域即使在小程序有右侧胶囊的情况下也能处于屏幕的中间，是通过绝对定位实现的
let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
style.left = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px';
style.right = rightButtonWidth - (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + rightButtonWidth +
'px';
// #endif
style.width = uni.upx2px(this.titleWidth) + 'px';
return style;
},
// 转换字符数值为真正的数值
navbarHeight() {
// #ifdef APP-PLUS || H5
return this.height ? this.height : 44;
// #endif
// #ifdef MP
// 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
// 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
// return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
let height = systemInfo.platform == 'ios' ? 44 : 48;
return this.height ? this.height : height;
// #endif
}
},
created() {},
methods: {
goBack() {
// 如果自定义了点击返回按钮的函数，则执行，否则执行返回逻辑
if (typeof this.customBack === 'function') {
// 在微信，支付宝等环境(H5正常)，会导致父组件定义的customBack()函数体中的this变成子组件的this
// 通过bind()方法，绑定父组件的this，让this.customBack()的this为父组件的上下文
this.customBack.bind(this.$u.$parent.call(this))();
} else {
uni.navigateBack();
}
}
}
};
</script>二、注意事项
在使用uview的导航栏组件------ Navbar 自定义导航栏的时候，那我们就需要在page.json里面取消该页面的自带导航栏样式
三、导航栏组件使用
以下是我们要实现的几种导航栏效果图
效果1：
那我们可以这样写：
<u-navbar
title="我的好友" //导航栏的标题
title-color="#25AFA2" //导航栏标题的颜色
titleCenter="true" //导航栏是否设置在中间
back-icon-name="/" //返回图标，设置“/”就可以去掉这个图标
>
</u-navbar>效果2：
我们可以这样写：
<!-- 页面顶部导航栏 -->
<view>
<u-navbar
title="我的发布" // 标题的内容
title-color="#25AFA2" //标题的颜色
back-icon-name="nav-back" //返回图标“nav-back”，
back-icon-color="#25AFA2" //返回图标的颜色
back-text="返回" //返回图标右边的文字
>
</u-navbar>
</view>效果3:
<!-- 页面顶部导航栏 -->
<view>
<u-navbar
back-icon-name="nav-back" //返回图标"nav-back"
back-icon-color="#FFFFFF" // 返回图标的颜色
back-text="返回" // 返回图标右边的文字
:background="background" //绑定背景
class="navbar"
:immersive="false" //是否沉浸式，允许fixed定位后导航栏塌陷，仅fixed定位下生效
:border-bottom="false" // 是否显示导航栏的下边框，这里不显示
>
<view class="slot-wrap">
<uni-icons type="search" // 设置右边的搜索图标
class="headicon" size="20" // 尺寸
color="#ffffff">
</uni-icons>
</view>
</u-navbar>
return {
background: {
backgroundColor: 'transparent' //设置背景为透明
},
}
.slot-wrap {
display: flex;
padding: 0 30rpx;
margin-left: auto;
/* 如果您想让slot内容占满整个导航栏的宽度 */
/* flex: 1; */
/* 如果您想让slot内容与导航栏左右有空隙 */
/* padding: 0 30rpx; */
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
