uniapp微信小程序自定义导航栏实现攻略:定制化界面引领用户体验新潮流!

1、引言

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

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

2、实现步骤

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

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

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

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

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

scss 复制代码
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>

3、至此结束

开始你的尝试吧

相关推荐
毕设源码-邱学长12 分钟前
【开题答辩全过程】以 基于微信小程序校园综合服务平台的设计与实现为例,包含答辩的问题和答案
微信小程序·小程序
Thetimezipsby13 分钟前
基于Taro4打造的一款最新版微信小程序、H5的多端开发简单模板
前端·javascript·微信小程序·typescript·html5·taro
從南走到北24 分钟前
JAVA同城打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码
java·开发语言·微信·微信小程序·小程序
猫七先生3 小时前
微信小程序一键登录可行性方案
前端·微信小程序
canglingyue3 小时前
微信小程序截屏与录屏功能详解
微信小程序·小程序
吴传逞17 小时前
记一次uniapp微信小程序开发scss变量失效的问题
微信小程序·uni-app·scss
服务端技术栈1 天前
历时 1 个多月,我的第一个微信小程序「图片转 Excel」终于上线了!
前端·后端·微信小程序
宋辰月1 天前
微信小程序-day4
微信小程序·小程序
^Rocky1 天前
微信小程序(uniapp)实现连接蓝牙
微信小程序·uni-app·蓝牙连接
weixin_472183542 天前
微信小程序预览和分享文件
微信小程序·小程序