微信小程序顶部导航栏自定义

微信小程序顶部导航栏自定义，根据不同手机自适应距离状态栏高

工作中开发微信小程序，在原本提供的导航栏无法满足需求的情况下，要进行自定义导航栏来实现我们的需求，针对不同手机大小，做到高度统一，下面我们来看看如何实现

一、微信小程序顶部导航栏自定义

"navigationStyle": "custom"   // 取消原生导航栏

 "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "标题",
    "navigationBarTextStyle": "black",
    "navigationStyle": "custom"
  },

二、根据不同手机自适应距离状态栏高度

首先在app.js里面获取状态栏高度，并存储为全局变量

获取系统信息wx.getSystemInfo(Object object)

wx.getSystemInfo({
    success: function (res) {
        that.globalData.statusBarHeight = res.statusBarHeight
     }
     console.log(res.statusBarHeight, 'statusBarHeight')
})

在所需页面里使用：

 
//获取应用实例
const app = getApp();
page({ 
    data: {
        //获取全局变量 导航栏的高度statusBarHeight
        statusBarHeight: getApp().globalData.statusBarHeight,
    },
})

<!-- 状态栏 -->
<view style='height: {{statusBarHeight}}px;'></view> 
<!-- 标题栏 -->
<view style='height: 44px;'>标题</view>

image.png

也可以直接写成组件不用每次都取，看自己啦