微信小程序自定义导航栏

业务需求：点击小房子进行跳转指定的页面、更改小房子的样式、或者是自定义导航栏

首先我们需要找到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(仅小程序)等原生组件，滚动时会覆盖住导航栏
以上都是可能会发生的问题
我们可以通过编译分端处理来解决但还是尽量使用原生的导航栏以免出现更多复杂的问题

以上就是微信小程序自定义导航栏感谢大家的阅读
如碰到其他的问题可以私下我一起探讨学习
如果对你有所帮助还请 点赞收藏谢谢~！
关注收藏博客作者会持续更新…