评论

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>

点赞 1
收藏
评论
登录 后发表内容