Uniapp微信小程序：轻松实现自定义导航栏，提升用户体验

1、引言

当涉及微信小程序的界面设计时，我们常常会发现自带的导航栏功能相对简单，仅限于显示当前页面的标题。然而，在实际开发过程中，我们往往需要更多的自由度和个性化，以满足用户体验的需求。因此，自定义导航栏成为必然选择。通过自定义导航栏，我们可以赋予小程序更多的设计灵活性和交互性，不再受限于传统的简单导航功能，更能突显个性化的特色，提升用户的整体体验感受。在本文中，我们将深入探讨如何实现自定义导航栏，并解释其对于微信小程序开发的重要性和实际应用的价值。此文章以uniapp+pinia演示。 如下：微信自定义的导航栏比较简单

看看滴滴出行，选择在导航栏部署选择城市、扫一扫等工具。

2、实现步骤

1、pinia创建deviceStore作为全局存储空间存储设备信息

state中保存三个数据：statusBarHeight、menuButtonInfo、navBarHeight。

2、定义一个component当作自定义导航栏（我的叫做 HeadNav），在用到自定义导航栏的页面会使用这个组件

在这个组件里此处判断storage中是否有statusBarHeight、navBarHeight两个数据，没有则执行pinia中的方法deviceStore.getInfo()获取设备信息。

3、获取到手机状态栏的高度，胶囊宽高计算出状态栏与胶囊按钮中的空隙，保存至缓存

const statusBarHeight = (uni.getStorageSync('statusBarHeight')|| ref({}))//手机状态栏的高度，这个状态来就是手机顶部的电量啊，信号这些区域的高度，如果是刘海屏，它还会包含刘海屏的高度
const menuButtonInfo = ref({})//胶囊信息,就是微信小程序自带的那个有关闭，分享按钮的胶囊。
const navBarHeight =  (uni.getStorageSync('navBarHeight')|| ref({}))//状态栏与胶囊按钮中的空隙
//缓存中没有的话就执行下面方法：
statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
menuButtonInfo.value = uni.getMenuButtonBoundingClientRect()
//然后计算出navBarHeight
navBarHeight.value = (menuButtonInfo.value.bottom - statusBarHeight.value) + (menuButtonInfo.value.top - statusBarHeight.value) //状态栏与胶囊按钮中的空隙

4、设置允许自定义状态栏，uniapp中在pages.json里面设置，微信小程序原生开发是在app.json（全局设置）或index.json（页面设置）

"path" : "ChatDetail/ChatDetail",
     "style" :                                                                                 
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }        
}

5、进入刚刚新建的component里进行状态栏占位，高度是手机状态栏的高度。

6、创建真正的导航栏内容，并给一个初始高度防止黏在状态站位栏，这个高度是状态栏与胶囊按钮中的空隙。

<!-- 状态栏占位 -->
	<view :style="{height:deviceStore.statusBarHeight+'px'}"></view>
	<!-- 真正的导航栏内容 ，请按照自己的需求自行定义-->
	<view :style="{height:deviceStore.navBarHeight+'px'}" class="nav">
		<uni-icons type="back" size="30" class="nav-back" @click="goBackIndex"></uni-icons>
		<image :src="avatar"  class="nav-avatar" @click="gotoOthersInfo"></image>
		<text class="nav-name" @click="gotoOthersInfo">{{nickname}}</text> 
	 </view>
</view>

学习资料：点此下载