uni-app自定义导航栏

有时我们需要对导航栏进行自定义，接下来就是对uni-app进行代码的编写

对于一些不是很复杂的顶部导航，当然使用原生导航栏实现是最佳选择
uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框，只需在page.json里面做一些配置即可。设置app-plus，不过目前暂支持H5、App端，不支持小程序。
将navigationStyle设为custom或titleNView设为false时，原生导航栏不显示，这时就能自定义导航栏

"globalStyle": {
     "navigationStyle": "custom" }

<script>
	import Vue from 'vue'
	export default {
    
		onLaunch: function() {
    
			uni.getSystemInfo({
    
				success: function(e) {
    
					// #ifndef MP
					Vue.prototype.StatusBar = e.statusBarHeight;
					if (e.platform == 'android') {
    
						Vue.prototype.CustomBar = e.statusBarHeight + 50;
					} else {
    
						Vue.prototype.CustomBar = e.statusBarHeight + 45;
					};
					// #endif

					// #ifdef MP-WEIXIN
					Vue.prototype.StatusBar = e.statusBarHeight;
					let custom = wx.getMenuButtonBoundingClientRect();
					Vue.prototype.Custom = custom;
					Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight + 4;
					// #endif 

					// #ifdef MP-ALIPAY
					Vue.prototype.StatusBar = e.statusBarHeight;
					Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
					// #endif
				}
			});
		},
		onShow: function() {
    
			console.log('App Show')
		},
		onHide: function() {
    
			console.log('App Hide')
		}
	}
</script>

<style lang="scss">
	@import "colorui/main.css";
	@import "colorui/icon.css";
	@import "uview-ui/index.scss";
</style>