微信小程序-自定义单页面导航栏

自定义背景图片：
在需要自定义的页面 .json 文件中设置：“navigationStyle”: “custom”

{
  "usingComponents": {},
  "navigationStyle": "custom"
}

效果图：

首先，需要在app.js文件中配置：

App({
  globalData: {
   
  },
  onLaunch: function () {
    let menuButtonObject = wx.getMenuButtonBoundingClientRect();
    // console.log(menuButtonObject);
    wx.getSystemInfo({
      success: res => {
        //导航高度
        let statusBarHeight = res.statusBarHeight,
          navTop = menuButtonObject.top,//胶囊按钮与顶部的距离
          navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight)*2;
          
        this.globalData.navHeight = navHeight;
        this.globalData.navTop = navTop;
        this.globalData.windowHeight = res.windowHeight;
      },
      fail(err) {
        console.log(err);
      }
    })
  }
})

1、wxml 部分：

<view class="content">
  <!-- 背景图片部分 -->
  <image class="nav-bg" src="/img/my-header-bg.png"></image>
  <!-- 导航部分 -->
  <view class="navbar" style="height:{{navHeight}}px">
    <view class="navTop" style="height:{{navTop}}px"></view>
    <view class="navTitle" style="line-height:{{navTitle}}px">
      <view class="icon-box">箭头</view>
      <view class="title">标题</view>
    </view>
  </view>
  <!-- 内容部分 -->
  <view class="con-main" style="top:{{navHeight}}px">
    内容部分
  </view>
</view>

2、js 部分：

const app =getApp()

Page({

  /**
   * 页面的初始数据
   */
  data: {
    navTop:'',
    navHeight:'',
    navTitle:""
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      navTop:app.globalData.navTop,
      navHeight:app.globalData.navHeight,
      navTitle:app.globalData.navHeight-app.globalData.navTop
    })
  },
})

3、wxss 部分：

.nav-bg {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 600rpx;
}

.navbar {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
}
.navTitle{
  text-align: center;
  color: #fff;
  position: relative;
}
.navTitle .icon-box{
  position: absolute;
  left: 30rpx;
}
.con-main {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  border: 1px solid red;
}

详细解释可以参考：参考