在uni-app中开发微信小程序：如何使用自定义导航栏

已于 2024-09-15 15:23:10 修改
阅读量174 收藏
点赞数 2
文章标签： uni-app 微信小程序 小程序
于 2024-09-15 11:51:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panghuangang/article/details/142282191
版权

在pages.json文件配置：隐藏默认导航栏

https://uniapp.dcloud.net.cn/collocation/pages.html#style
在这里插入图片描述

在pages.json文件中通过style配置"navigationStyle": "custom",来隐藏默认导航栏：
在这里插入图片描述

在页面中引用自定义的导航栏组件

在这里插入图片描述

在自定义的导航栏组件中动态适配不同机型的安全区域

在自定义的导航栏中动态样式适配不同机型的安全区域：
在这里插入图片描述

听海边涛声
关注
uniapp开发微信小程序--自定义顶部导航栏
weixin_48596030的博客
08-01 3237
"navigationStyle" : "custom" //自定义导航栏。
uni-app 微信小程序之自定义navigationBar顶部导航栏
@必意玲
12-03 4488
文章目录1. 实现效果2. App.vue3. pages.json 配置自定义4. 顶部导航栏 使用 微信小程序自定义 navigationBar 顶部导航栏，兼容适配所有机型 1. 实现效果 2. App.vue 在App.vue 中，设置获取的 StatusBar，CustomBar 高度（实现适配高度写法） uni.getSystemInfo 获取可视区域的高度 wx.getMenuButtonBoundingClientRect() 胶囊按钮位置信息 <script> im
uni-app开发微信小程序：首页骨架屏
听海边涛声
09-18 829
uni-app开发微信小程序：首页骨架屏
uni-app自定义微信小程序头部导航栏
XINGZI前端程序猿的博客
09-11 3948
当前为默认导入子组件（配置项参数为进行任何更改）状态，默认使用背景色#9CF，可自行根据业务需求更改背景色或渐变背景色。
小程序开发学习-1-使用uni-app框架开发微信小程序
热爱编程，享受开发Coding的乐趣，一个开发爱好者的博客
01-05 674
uniapp入门学习
uni-app微信小程序,APP都适用自定义顶部导航
weixin_64218480的博客
08-02 5009
uniapp微信小程序+App 自定义顶部导航
uni-app微信小程序商城-自定义导航栏
m0_68286491的博客
03-21 715
新鲜 · 亲民 · 快捷</text><text class="icon-search">搜索商品
uni-app开发微信小程序
hong161688的博客
09-09 1498
使用uni-app开发微信小程序，可以充分利用 Vue.js 的开发效率和uni-app的跨平台能力，实现快速、高效、低成本的开发。通过本文的介绍，你可以了解到从项目搭建到发布上线的全过程，以及在这个过程中需要注意的关键点和可能遇到的问题。希望这篇文章能为你的微信小程序开发之路提供一些有益的参考。
微信小程序（uniapp）自定义导航栏
Rocky_Time的博客
02-29 2364
微信小程序原生页面导航栏，无法进行自定义交互，如想实现类似下图的效果，就得使用自定义导航栏这里使用到uView的组件u-navbar。本文简单介绍了微信小程序自定义导航栏，若有其他更好的交互方式，欢迎评论区补充。
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
12-13
在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框，只需在page.json里面做一些配置即可。设置app-plus，配置编译到App平台的特定样式。dcloud平台对app-plus做了详细说明：app-plus配置，需注意 ...
微信小程序自定义tabBar在uni-app的适配详解
10-16
### 微信小程序自定义tabBar在uni-app的适配详解 #### 引言 微信小程序目前提供了较为灵活的tabBar自定义方式，可以在uni-app环境下实现个性化设计。在uni-app中适配微信小程序的自定义tabBar，虽然官方文档没有...
uni-app-custom-navigation-:这是一个基于uni-app的头部自定义导航栏，采用的技术：微信小程序API，结合Vue语法实现；自定义导航进行了封装，任何页面随时都可以引入，并且可通过条件控制进行所需展示与隐藏的。以上只是个demo,具体更多的可以自行添加与缩减并进行相应样式美化~
05-11
这是一个基于uni-app的头部自定义导航栏，采用的技术：微信小程序API，结合Vue语法实现；自定义导航进行了封装，任何页面随时都可以引入，并且可通过条件控制进行所需展示与隐藏的。以上只是个demo,具体更多的可以...
uniapp瀑布列表
YM123456999的博客
10-16 103
uniapp、vue、瀑布列表
uni-app使用v-show编译成微信小程序的问题
菜鸡的博客
10-10 527
当我们设置成在Hbuilder X里面确实没有显示然后运行到 微信开发程序里面发现显示了出来，说明设置的没有起作用。
uniapp_微信小程序_echarts_动态折线图
apple_70049717的博客
10-16 118
#uniapp_微信小程序_echarts_动态折线图用来总结和学习，便于自己查找。
uni-app如何搭建项目(一步一步教程)
2301_78884095的博客
10-10 566
首先我们要有一个HBuilder这个软件，然后我们来搭建uni-app项目。
在uniapp中实现即时通讯中的【发送语音】
qq_45569925的博客
10-09 814
在与好友的对话框中，点击语音图标可以切换到给好友发送语音，长按发送语音的按钮即可开始录音： 如果录制时间小于60s时，松手则表示录音结束并将语音消息发送给对方； 如果录制的时间超过60s则自动结束，并将语音发送给对方； 如果在录制60s之内并且没有松手，而是上滑100像素，则表示取消发送该条语音；
基于SpringBoot+Vue+uniapp的在线招聘平台的详细设计和实现
最新发布
源码好优多
10-16 507
请联系我获取更详细的演示视频。
uniapp 小程序0到1教程
weixin_43814775的博客
10-16 234
uniapp 小程序0到1教程
uni-app微信小程序定制tabBar实现异形导航栏详解
在微信小程序开发中，特别是在uni-app框架中，实现自定义tabBar以创建中间图标突出显示的异形导航栏是一项常见的需求。通常，微信小程序的官方文档可能不提供直接的API来支持这样的自定义样式，但通过非标准方法可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值