微信小程序顶部导航栏配置

自定义顶部导航栏和胶囊状组件高度匹配且设配各种设备

在app.json中默认为

"window": {    
    "backgroundColor": "#000",    
    "backgroundTextStyle": "light",    
    "navigationBarBackgroundColor": "#2dc4be",   
    "navigationBarTitleText": "微信小程序",   
    "navigationBarTextStyle": "white",    
    "navigationStyle": "default" 
 },

在要自定义导航栏的页面.json文件中配置

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

用于去除默认导航栏

导航栏由状态栏的高度和胶囊的高度组成

首先获取状态栏的高度

在app.json中定义状态栏的px高度和px到rpx的缩放比例

App({  
    globalData:{    
        statusBarHeight:null,   
        pxToRpx:1  
    }, 
    onLaunch:async function () {  
        await wx.getSystemInfo({     
            success: (result) => {       
                this.globalData.statusBarHeight=result.statusBarHeight       
                this.globalData.pxToRpx=750/result.windowWidth     
            }, 
          })  
    }
})

//在目标页面自定义导航栏  
<view class="home-body"  style="top:{
    
    {statusBarHeight}}rpx;">  
  <view class="home-title" style="line-height:{
    
    {titleHeight}}rpx;">{
    
    {title}}</view>  
</view>

//获取app实例
const app = getApp()

  data: {    
    title:'首页标题',    
    statusBarHeight:0,    
    titleHeight:0, 
    },  
    init:function(){    
        const titleHeight = wx.getMenuButtonBoundingClientRect().height    
        const navTop = wx.getMenuButtonBoundingClientRect().top    
        this.setData({     
             titleHeight:titleHeight * app.globalData.pxToRpx,     
             statusBarHeight:navTop * app.globalData.pxToRpx   
        })  
    },

/**   * 生命周期函数--监听页面加载   */  
    onLoad: function (options) {    
        this.init()  
    },