微信小程序自定义导航栏
业务需求： 点击小房子进行跳转指定的页面 、更改小房子的样式、或者是自定义导航栏
- 首先我们需要找到pages.json这个文件
如果是原生的微信小程序文件名字是 app.json其实就是找到配置路由的文件 - 在代码里面添加属性"navigationStyle":“custom”
{ "path": "pages/home", "style": { "navigationBarTitleText": "首页", "navigationStyle":"custom" // 自定义导航栏配置 } },
以下我们有两种方法自定义导航：
1.原生的导航栏组件
<uni-nav-bar title="导航栏组件"></uni-nav-bar>
2.自定义样式（可能会遇到ios/安卓版本样式兼容问题）
<view class="inaver _30f2b4d" > <view class="left _30f2b4d"> <image class="icon _30f2b4d" src="自定义图标"></image> </view> <view class="center _30f2b4d"> <!-- 自定义区域 --> </view> <view class="right _30f2b4d"> </view> </view> <view class="protect-inaver _30f2b4d"> <!-- 占据顶部位置分割样式 --> </view>
<style> .inaver._30f2b4d { box-sizing: border-box; padding-top: 84rpx; width: 100vw; height: 180rpx; display: flex; position: fixed; z-index: 5000; top: 0; left: 0; } .inaver .left._30f2b4d { width: 100rpx; height: 100rpx; margin: 8rpx; } .inaver .left image.icon._30f2b4d { width: 45rpx; height: 45rpx; padding: 10rpx; margin: 10rpx; background-color: #d0d0d0; border-radius: 100%; } .inaver .center._30f2b4d { height: 100rpx; line-height: 100rpx; flex: 1; margin: 8rpx; } .inaver .right._30f2b4d { width: 240rpx; height: 100rpx; margin: 8rpx; } .protect-inaver._30f2b4d { box-sizing: border-box; width: 100vw; height: 160rpx; } </style>
最后我们需要注意几个问题：
1.非H5端，手机顶部状态栏区域会被页面内容覆盖。这是因为窗体是沉浸式的原因，即全屏可写内容。uni-app提供了状态栏高度的css变量–status-bar-height，如果需要把状态栏的位置从前景部分让出来，可写一个占位div，高度设为css变量。
2.前端导航栏搭配原生下拉刷新时，会有问题
3.非H5端，前端导航盖不住原生组件。如果页面有video、map、textarea(仅小程序)等原生组件，滚动时会覆盖住导航栏
以上都是可能会发生的问题
我们可以通过 编译分端处理 来解决 但还是尽量使用原生的导航栏以免出现更多复杂的问题
以上就是微信小程序自定义导航栏感谢大家的阅读
如碰到其他的问题 可以私下我 一起探讨学习
如果对你有所帮助还请 点赞收藏谢谢~！
关注收藏博客 作者会持续更新…
