uniapp微信小程序自定义导航栏的全过程

网友投稿 1109 2023-11-10

−目录前言那么标题栏的高度我们怎么获取呢？献上源码：组件使用：效果图：总结

前言

相信很多小伙伴在使用uniapp进行多端开发的时候呢，在面对一些奇葩的业务需求的时候，uniapp给我们提供的默认导航栏已经不能满足我们的业务需求了，这个时候就需要我们自己自定义导航栏使用啦。

当然uniapp也给我们提供了很多的自定义导航栏的插件供大家使用，今天也给大家分享一个我自己写的导航栏啦，希望大家多多指点

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

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

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

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

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

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

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

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

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

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

献上源码：

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

/**

* 此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-WEIXIN

const menuButtonInfo = wx.getMenuButtonBoundingClientRect()

// 胶囊高度

let menuButtonHeight = menuButtonInfo.height * scaleFactor //rpx

// 胶囊宽度

let menuButtonWidth = menuButtonInfo.width * scaleFactor //rpx

// 胶囊上边界的坐标

let menuButtonTop = menuButtonInfo- * scaleFactor //rpx

// 胶囊右边界的坐标

let menuButtonRight = menuButtonInfo.right * scaleFactor //rpx

// 胶囊下边界的坐标

let menuButtonBottom = menuButtonInfo.bottom * scaleFactor //rpx

// 胶囊左边界的坐标

let menuButtonLeft = menuButtonInfo.left * scaleFactor //rpx

// 微信小程序中导航栏高度 = 胶囊高度 + (顶部距离 - 状态栏高度) * 2

navHeight = menuButtonHeight + (menuButtonTop - statusBarHeight) * 2

// #endif

// #ifdef MP-WEIXIN

return {

scaleFactor,

windowHeight,

windowWidth,

statusBarHeight,

menuButtonHeight,

menuButtonWidth,

menuButtonTop,

menuButtonRight,

menuButtonBottom,

menuButtonLeft,

navHeight

}

// #endif

// #ifndef MP-WEIXIN

return {

scaleFactor,

windowHeight,

windowWidth,

statusBarHeight

}

// #endif

}

export {

systemInfo

}

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

组件使用：

引入组件：

import HeadNav from @/components/HeadNav.vue

组册组件：

components:{

HeadNav

<head-nav></head-nav>

</view>

</template>

效果图：

微信小程序：

h5:

app：

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

总结

您可能感兴趣的文章:微信小程序实现自定义导航栏微信小程序自定义导航栏实例代码微信小程序自定义导航栏微信小程序自定义底部导航栏组件微信小程序自定义导航栏（模板化）微信小程序自定义导航栏效果微信小程序自定义导航栏及其封装的全过程

标签：uniapp 程序微信小程序小程序网页

暂时没有评论，来抢沙发吧~

uniapp微信小程序自定义导航栏的全过程

前言

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

献上源码：

组件使用：

效果图：

总结

最近发表

更多内容

推荐文章

解决方案

热评文章