Custom top navigation bar and capsule shaped components are highly matched and equipped with various equipment

In app.json the default is

"window": { "backgroundColor": "#000", "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#2dc4be", "navigationBarTitleText": "navigationBarTextStyle": "white", "navigationStyle": "default"},Copy the code

Configure in the. Json file of the page where you want to customize the navigation bar

{  
"usingComponents": {},
"navigationStyle":"custom"
}
Copy the code

Use to remove the default navigation bar

The navigation bar consists of the height of the status bar and the height of the capsule

First get the height of the status bar

Define the status bar px height and px to RPX scaling in app.json

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> {title:' 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})}, /** * life cycle function -- function (options) { this.init() },Copy the code