#uni-app开发-实战总结#顶部导航栏制作（uView）本⽂的顶部导航栏为使⽤uView的导航栏组件------ Navbar ⾃定义导航栏
（⾸先先确保HBuilder X已经安装了uView ）
uView⾥⾯的导航栏，相⽐于官⽅⾃带的，
会有更多的样式及参数，所以在实际开发中，也可以多使⽤这个⾃定义导航栏组件
⼀、参数
以下是组件的⼀些参数：
API
Props
参数说明类型默认值可选值
height导航栏⾼度(不包括状态栏⾼度在内，内部⾃动加上)，注意这⾥的单位是px String |
Number
44-
back-icon-color左边返回图标的颜⾊String#606266-
back-icon-
name
左边返回图标的名称，只能为uView⾃带的图标，1.5.5起由arrow-left调整为nav-back 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，1.5.5起由32调整为44String |
Number
44-
z-index固定在顶部时的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.8Boolean false true Slot
名称说明
-⾃定义中间部分的内容
right⾃定义右侧部分内容
详细参数
<script>
// 获取系统状态栏的⾼度
let systemInfo = SystemInfoSync();
let menuButtonInfo = {};
// 如果是⼩程序，获取右上⾓胶囊的尺⼨信息，避免导航栏右侧内容与胶囊重叠(⽀付宝⼩程序⾮本API，尚未兼容)
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = MenuButtonBoundingClientRect();
// #endif
/**
* navbar ⾃定义导航栏
* @description 此组件⼀般⽤于在特殊情况下，需要⾃定义导航栏的时候⽤到，⼀般建议使⽤uniapp⾃带的导航栏。
* @tutorial www.uviewui/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: {
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 + (p - this.statusBarHeight) * 2;//导航⾼度
let height = systemInfo.platform == 'ios' ? 44 : 48;
return this.height ? this.height : height;
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="我的好友"  //导航栏的标题
textstyletitle-color="#25AFA2"  //导航栏标题的颜⾊
titleCenter="true"  //导航栏是否设置在中间
back-icon-name="/" //返回图标，设置“/”就可以去掉这个图标
>
</u-navbar>
效果2：