携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第12天，点击查看活动详情

微信小程序提供了自定义导航栏的能力，我们要实现一个顶部导航栏里面有背景图的导航栏的时候就可以用自定义导航来实现。如下图所示

😉首先看一下导航栏的属性

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 #000000
navigationBarTextStyle	string	white	导航栏标题颜色，仅支持 black / white
navigationBarTitleText	string		导航栏标题文字内容
navigationStyle	string	default	导航栏样式，仅支持以下值： default 默认样式 custom 自定义导航栏，只保留右上角胶囊按钮。

导航栏样式navigationStyle的属性，default 默认，custom自定义样式，在页面的json文件中，设置navigationStyle的样式为custom，只保留了右上角的胶囊。

{
  "navigationStyle": "custom",
}

这时候滚动页面，通知栏被覆盖掉了

设置"navigationBarTextStyle": "black",

😜新建一个view元素，设置背景色为图片的最上面的颜色，宽度100%，高度获取系统通知栏的高度。

<view style="height: {{barHight}}px;" class="c_nav"></view>

🤐设置导航栏的样式

.c_nav {
   width: 100%;
  background-color: #FC9B4C;
  position: fixed;
  top: 0;
  z-index: 1;
}

😐通过wx.getSystemInfoAsync获取navigation的高度

wx.getSystemInfoAsync({
  success: (result) => {
    this.setData({
      barHeight: result.statusBarHeight
    })
  },
})

🥳设置背景图

 <image src="/image/banner.png" class="img"></image>

😏全部代码

😏wxml代码

<view style="height: {{barHeight}}px;" class="c_nav"></view>
<view class="title" style="top:{{barHeight}}px">
  <image src="/image/banner.png" class="img"></image>
  <view class="titleFont">
    <text>自定义导航栏</text>
  </view>
</view>

😏js代码

 data: {
    barHeight: 0,
  },
  onLoad() {
    wx.getSystemInfoAsync({
      success: (result) => {
        this.setData({
          barHeight: result.statusBarHeight
        })
      },
    })
  },

😏css代码

.c_nav {
  width: 100%;
  background-color: #FC9B4C;
  position: fixed;
  top: 0;
  z-index: 1;
}

.title {
  width: 100%;
  height: 55px;
  position: fixed;
  z-index: 2;
}

.titleFont {
  width: 100%;
  height: 55px;
  position: absolute;
  z-index: 4;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.img {
  width: 100%;
  height: 200rpx;
  z-index: 3;
}