uniapp微信小程序怎么自定义导航栏

本篇内容介绍了“uniapp微信小程序怎么自定义导航栏”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

首先我们在自定义导航栏的时候，我们需要知道头部的导航栏有哪几部分组成，那么我们以微信小程序为例

可以看到在微信小程序中，我们的头部导航栏其实受到右上角胶囊的限制比较大，这个时候我们自定义的导航栏，需要做到标题于胶囊水平对齐，那其实这个时候整个头部其实主要又：状态栏的高度+标题栏的高度组成。

状态栏的高度我们可以通过uni.getSystemInfoSync().statusBarHeight来获取。

那么标题栏的高度我们怎么获取呢？

其实要想定义标题栏的高度，我们需要知道这个胶囊的位置，在小程序中我们可以使用wx.getMenuButtonBoundinGClientRect()获取关于胶囊的信息

获取到的胶囊的top，left，right分别对应胶囊的上边界，左边界，右边界相对于屏幕左上角的起点的位置，所以我们是不是可以用（胶囊上边界距离顶部的距离 - 状态栏的高度）*2+胶囊的高度，就是标题栏的高度呢？然后再在标题栏里面添加一个文本区让他的高度等于胶囊的高度，实现flex布局的上下居中是不是就搞定了呢？

以上呢其实针对小程序平台的导航栏讲解，那么既然使用uniapp，就会考虑到多端情况

那么其实我们使用uniapp获取到的状态栏在h6，小程序和app原生都是有效的，h6网页中一般我们都是直接采用浏览器内核给我们内置的网页导航栏，就是一个头部，没有过多的要求，而且浏览器不同，给我们提供的头部导航也不一样。

而对于app端，我们没有了像微信小程序中那种让人心烦的胶囊之后，我们只需要知道状态栏的高度，然后加上自己业务需求的标题栏样式和标题栏高度就行啦

所以我们在进行自定义导航栏封装的时候就要对代码进行条件编译啦。那么我这里呢是把微信小程序做了单独的处理，微信小程序之外的平台看作是统一状态

献上源码：

首先我们把获取设备信息的代码封装到一个统一的js文件里面，这样方便我们在组件中获取也方便我们在页面中获取。

const systemInfo = function() {// 设备系统信息let systemInfomations = uni.getSystemInfoSync()// 机型适配比例系数let scaleFactor = 750 / systemInfomations.windowWidth// 当前机型-屏幕高度let windowHeight = systemInfomations.windowHeight * scaleFactor //rpx// 当前机型-屏幕宽度let windowWidth = systemInfomations.windowWidth * scaleFactor //rpx// 状态栏高度let statusBarHeight = (systemInfomations.statusBarHeight) * scaleFactor //rpx // 导航栏高度  注意：此导航栏高度只针对微信小程序有效 其他平台如自定义导航栏请使用：状态栏高度+自定义文本高度let navHeight = 0 //rpx// console.log(windowHeight,'哈哈哈哈哈');// #ifdef MP-WEIXINconst menuButtonInfo = wx.getMenuButtonBoundingClientRect()// 胶囊高度let menuButtonHeight = menuButtonInfo.height * scaleFactor //rpx// 胶囊宽度let menuButtonWidth = menuButtonInfo.width * scaleFactor //rpx// 胶囊上边界的坐标let menuButtonTop = menuButtonInfo.top * scaleFactor //rpx// 胶囊右边界的坐标let menuButtonRight = menuButtonInfo.right * scaleFactor //rpx// 胶囊下边界的坐标let menuButtonBottom = menuButtonInfo.bottom * scaleFactor //rpx// 胶囊左边界的坐标let menuButtonLeft = menuButtonInfo.left * scaleFactor //rpx // 微信小程序中导航栏高度 = 胶囊高度 + (顶部距离 - 状态栏高度) * 2navHeight = menuButtonHeight + (menuButtonTop - statusBarHeight) * 2// #endif  // #ifdef MP-WEIXINreturn {scaleFactor,windowHeight,windowWidth,statusBarHeight,menuButtonHeight,menuButtonWidth,menuButtonTop,menuButtonRight,menuButtonBottom,menuButtonLeft,navHeight}// #endif // #ifndef MP-WEIXINreturn {scaleFactor,windowHeight,windowWidth,statusBarHeight}// #endif} export {systemInfo}

然后我们定义一个导航栏组件

<template><view><!-- 微信小程序头部导航栏 --><!-- #ifdef MP-WEIXIN --><view class="wx-head-mod" :><view class="wx-head-mod-nav" :><view class="wx-head-mod-nav-content":><!-- 文本区 --><view class="wx-head-mod-nav-content-mian":>{{textContent}}</view><!-- 返回按钮 --><view class="wx-head-mod-nav-content-back" :@click="backEvent"><view class="wx-head-mod-nav-content-back-img":><image :src="backImageUrl" mode="" ></image></view></view></view></view></view><!-- #endif --> <!-- 除微信小程序之外的其他设备 --><!-- #ifndef MP-WEIXIN --><view class="other-head-mod":><view class="other-head-mod-mian":><!-- 返回按钮 --><view class="other-head-mod-mian-back" v-show="isBackShow" @click="backEvent"><view class="other-head-mod-mian-back-img":><image :src="backImageUrl" mode="" ></image></view></view><!-- 标题 --><view class="other-head-mod-mian-title" :style="{width:windowWidth - 184+'rpx',lineHeight:navHeightValue*scaleFactor+'rpx',paddingLeft:textPaddingLeft*scaleFactor+'rpx',fontSize:fontSize*scaleFactor+'rpx',fontWeight:fontWeight,color:titleColor}">{{textContent}}</view></view></view><!-- #endif --></view></template> <script>const app = getApp()import {systemInfo} from '@/common/system-info.js'export default {name: "HeadView",props: {// 文本区域位置 left：左  center：中  textAlign: {type: String,default: 'center'},// 文本区内容textContent: {type: String,default: '哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈就啊哈哈好借好还'},// 文本区离左边的距离textPaddingLeft: {type: Number,default: 16},// 是否需要返回按钮isBackShow: {type: Boolean,default: true},// 文本区字体大小fontSize: {type: Number,default: 20 //px},// 文本区字体粗细fontWeight: {type: Number,default: 700},// 文本区返回按钮图片宽backImageWidth: {type: Number,default: 12 //px},// 文本区返回按钮图片高backImageHeight: {type: Number,default: 24 //px},// 返回按钮图标路径backImageUrl: {type: String,default: '/static/backImage.svg'},// 导航栏整体背景颜色navBackgroundColor: {type: String,default: '#2476F9'},// 标题字体颜色titleColor: {type: String,default: '#ffffff',}, navHeightValue: {type: Number,default: 44 //px}},computed: {// 文本区宽度navTextWidth() {if (this.textAlign === 'center') {return (this.windowWidth - (this.windowWidth - this.menubarLeft) * 2) + 'rpx'} else {return this.menubarLeft + 'rpx'}},// 文本区paddingLefttextPaddingleft() {if (this.textAlign === 'center') {return '0'} else {return this.textPaddingLeft + 'rpx'}}},data() {return {statusBarHeight: app.globalData.statusBarHeight, //状态栏高度navHeight: app.globalData.navHeight, //头部导航栏总体高度navigationBarHeight: app.globalData.navigationBarHeight, //导航栏高度customHeight: app.globalData.customHeight, //胶囊高度scaleFactor: app.globalData.scaleFactor, //比例系数menubarLeft: app.globalData.menubarLeft, //胶囊定位的左边leftwindowWidth: app.globalData.windowWidth * app.globalData.scaleFactor};},methods: {backEvent() {uni.navigateBack({delta: 1})}},created() {const SystemInfomations = systemInfo()this.statusBarHeight = SystemInfomations.statusBarHeight //状态栏高度this.scaleFactor = SystemInfomations.scaleFactor //比例系数this.windowWidth = SystemInfomations.windowWidth //当前设备的屏幕宽度// #ifdef MP-WEIXINthis.navHeight = SystemInfomations.navHeight + SystemInfomations.statusBarHeight //头部导航栏总高度this.navigationBarHeight = SystemInfomations.navHeight //头部导航栏高度this.customHeight = SystemInfomations.menuButtonHeight //胶囊高度this.menubarLeft = SystemInfomations.menuButtonLeft //胶囊左边界距离左上角的距离// #endif}}</script> <style>.wx-head-mod {box-sizing: border-box;width: 100%;position: fixed;top: 0;left: 0;} .wx-head-mod-nav {box-sizing: border-box;width: 100%;position: absolute;left: 0;display: flex;justify-content: center;align-items: center; } .wx-head-mod-nav-content {box-sizing: border-box;width: 100%;display: flex;justify-content: left;align-items: center;position: relative;} .wx-head-mod-nav-content-mian {box-sizing: border-box;height: 100%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;} .wx-head-mod-nav-content-back {box-sizing: border-box;width: 60rpx;height: 100%;position: absolute;top: 0;left: 32rpx;display: flex;align-items: center;justify-content: left;} .wx-head-mod-nav-content-back-img {box-sizing: border-box;}  .other-head-mod {box-sizing: border-box;width: 100%;position: fixed;top: 0;left: 0;} .other-head-mod-mian {box-sizing: border-box;width: 100%;display: flex;align-items: center;justify-content: left;position: absolute;left: 0;bottom: 0;} .other-head-mod-mian-back {box-sizing: border-box;height: 100%;width: 60rpx;position: absolute;left: 32rpx;top: 0;display: flex;align-items: center;} .other-head-mod-mian-title {box-sizing: border-box;height: 100%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;} </style>

组件使用：

引入组件：

import HeadNav from '@/components/HeadNav.Vue'

组册组件：

components:{HeadNav},

<template><view class="content"><head-nav></head-nav><view class="content-main"></view></view></template>

效果图：

微信小程序：

h6:

app：

在项目里面没有针对h6时候需要导航栏做特别的限制，如果实际开发中在h6端不需要此导航栏，请在模版上面针对h6页面加入条件编译即可。

“uniapp微信小程序怎么自定义导航栏”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！