Development of user-defined navigation bar in uniapp

In my eyes, custom navigation points 2 class : On the original basis || On a non-native basis
summary : The project can be native , Improve performance
difference

uni-app  With native navigation bar , stay pages.json Internal configuration .
 The experience of native navigation is better , When rendering a new page , The rendering of the native navigation bar does not need to wait for a new page dom load , You can render when the new page enters the animation .

 Native navigation can also avoid scrolling through the top , And easily control the native pull-down refresh .
 adopt pages.json Configuration of , It can be simple 、 Cross end 、 High performance development business .

 But the expansion ability of the native navigation bar is limited . Especially under wechat , Not many navigation bar configurations are provided .
 stay App Next ,pages.json Of every page in app-plus You can set titleNView More parameters , You can get richer scalability than wechat applet .
 in addition , Developers can also cancel the native navigation bar if necessary , Use view Draw the navigation bar by yourself .

On the original basis

• adopt app-plus Attribute extension for custom navigation
  https://uniapp.dcloud.io/collocation/pages?id=app-plus

 A document description :
1. When native navigation can meet business needs , Try to use native navigation , Sometimes we even need to sacrifice some unimportant needs .
2. stay App and H5 Next ,uni-app It provides a flexible processing scheme ：`titleNView、subNVue`、 Or use the whole page nvue.
3. But under the applet , Because of its own limitations , There is no good plan . If necessary , You can also use conditional compilation for end-to-end processing .

So the main thing is to use app-plus Of titleNView( The navigation bar )、subNVue( child window ) attribute

• titleNView( The navigation bar ) All of the following are in titleNView Operation under attribute
  https://uniapp.dcloud.io/collocation/pages?id=app-titlenview

 Commonly used are button attributes :https://uniapp.dcloud.io/collocation/pages?id=app-titlenview-buttons

titleNView.buttons.type
except type Documents have other properties

"buttons": [{"type": "menu"},{"type": "favorite"}]
 Other types 
"forward"： Forward button       "back"： Back button 
"share"： Share button         "favorite"： Collection button 
"home"： Home button           "menu"： Menu buttons 
"close"： close button          "none"： No style , Don't show icons 

Custom back button
titleNView.backButton

 Usage follows button equally , But it needs to be in autoBackButton Set to true Effective when 
https://uniapp.dcloud.io/collocation/pages?id=app-titlenview-backbuttonstyles

titleNView.< Other attributes >
https://uniapp.dcloud.io/collocation/pages?id=app-titlenview

 Out button and back button   There are other properties such as 
searchInput  Search box configuration on native navigation bar 
homeButton   Whether the title bar control displays Home Button 
backgroundImage  Background image path   wait 

The life cycle of these buttons

// The event parameter e.index The value is to click the button in buttons Index value of array , from 0 Start 
onNavigationBarButtonTap(e)  Click event of this lifecycle monitoring button 
// When a search box is set, the life cycle of the search box 
onNavigationBarSearchInputChanged()// The content of the search box changes 
onNavigationBarSearchInputConfirmed()// Search events are also carriage return events of mobile phones 

How to change these buttons
webView Object documents and other methods https://www.html5plus.org/doc/zh_cn/webview.html#
Search for WebviewObject Keyword No 47 A place

// #ifdef APP-PLUS  
var webView = this.$mp.page.$getAppWebview(); // You have to get webview object 
webview.showTitleNViewButtonRedDot()// The calling method displays a red dot 
webview.showTitleNViewButtonRedDot()// Call method to hide red dot 
webview.setTitleNViewButtonBadge()// Modify the red dot corner mark 
webview.setTitleNViewButtonStyle()// Modify button 
// #endif

These are based on the original app-plus Of titleNView( The navigation bar ), There's another. subNVue( child window ) attribute

• subNVue( child window ) attribute All of the following are in subNVue( child window ) Operation under attribute
  To configure
  subNVue.style
  https://uniapp.dcloud.io/collocation/pages?id=app-subnvuesstyle

subNVue yes  vue  Subform of the page , It's not a full screen page , Is used to solve  vue  It is used for the level coverage in the page and the customization of the native interface . Nor is it a component , It's a primitive child form 

nvue Quick start 
https://uniapp.dcloud.io/nvue-outline?id=_1%e6%96%b0%e5%bb%banvue%e9%a1%b5%e9%9d%a2

Method

const subNVue = uni.getSubNVueById(' Of the original subform  ID'); Get child window object 
 For developing pop-up windows and navigation 
subNVue Object method 
https://uniapp.dcloud.io/api/window/subNVues?id=app-getsubnvuebyid
nvue  Follow  vue  Communication of 
https://ask.dcloud.net.cn/article/36010

On a non-native basis

Global cancel native navigation bar "navigationStyle":"custom"

• 1. Cancel the native navigation bar

"navigationStyle":"custom"
 The problems brought about by : Some new components have solved this problem .  status bar ( The column showing the power , Not the navigation bar ), The navigation bar is directly trapped .

• 2. Handle status bar issues
  App Because the default is immersive , After removing the navigation bar , The top of the page will go directly to the area of the status bar
  uni-app Built in CSS Variable solving
  https://uniapp.dcloud.io/frame?id=css%E5%8F%98%E9%87%8F
  After writing the code, it directly solves my problem

<!-- #ifdef APP-PLUS -->  
<view class="status_bar">  
    <view class="top_view"></view>  
</view>  
<!-- #endif -->
	/*
	* !!! Then put your own navigation component under it 
	* https://ext.dcloud.net.cn/plugin?id=52( I think this is ok )
	*/
//css part 
.status_bar {  
    height: var(--status-bar-height);  
    width: 100%;  
    background-color: #F8F8F8;  
}  
.top_view {  
    height: var(--status-bar-height);  
    width: 100%;  
    position: fixed;  
    background-color: #F8F8F8;  
    top: 0;  
    z-index: 999;  
}

• 3.H5、 Applet 、App The end status bar is different , It needs to be recalculated , Here is the code handled by others
  Use it directly , stay App.vue Just set it inside

onLaunch: function() {
    uni.getSystemInfo({
        success:function(e){
            Vue.prototype.statusBar = e.statusBarHeight
            // #ifndef MP
            if(e.platform == 'android') {
                Vue.prototype.customBar = e.statusBarHeight + 50
            }else {
                Vue.prototype.customBar = e.statusBarHeight + 45
            }
            // #endif
            
            // #ifdef MP-WEIXIN
            let custom = wx.getMenuButtonBoundingClientRect()
            Vue.prototype.customBar = custom.bottom + custom.top - e.statusBarHeight
            // #endif
            
            // #ifdef MP-ALIPAY
            Vue.prototype.customBar = e.statusBarHeight + e.titleBarHeight
            // #endif
        }
    })
},

After disabling native navigation You can also change the style through the interface
https://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.setStatusBarStyle

 After disabling the native navigation bar on the page , You can still set the of the page  navigationBarTextStyle  attribute 
 Pay attention to some low-end Android mobile phone （4.4） Setting the status bar foreground is not supported by itself .