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>