微信小程序自定义导航栏

微信小程序自定义导航栏

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

• 首先我们需要找到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(仅小程序)等原生组件，滚动时会覆盖住导航栏
• 以上都是可能会发生的问题
  我们可以通过 编译分端处理 来解决 但还是尽量使用原生的导航栏以免出现更多复杂的问题
  
  以上就是微信小程序自定义导航栏感谢大家的阅读
  如碰到其他的问题 可以私下我 一起探讨学习
  如果对你有所帮助还请 点赞收藏谢谢~！
  关注收藏博客 作者会持续更新…