uniapp-微信小程序开发 随记 --自定义顶部栏的样式处理

问题起因 --由于UI设计图导航栏和内容相连 是渐变色以及 编写页面的过程中发现导航栏不能与页面完美契合 中间有一条线 导致页面样式不一致

1.解决方案：自定义导航栏
2.解决步骤：1>在配置项pages.json 文件中 globalStyle中添加"navigationStyle": “custom”,
如
“globalStyle”: {
“navigationStyle”: “custom”,
},
该设置会取消掉小程序中自带的导航栏
3.参考colorui 文档 中cu-custom组件
4.组件的使用 1.首先 将cu-cusetom 的包移入 项目文件中 在App.vue 中 引入colorUI的编写的方法
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;
				// #endif		

				// #ifdef MP-ALIPAY
				Vue.prototype.StatusBar = e.statusBarHeight;
				Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
				// #endif
			}
		})

		]}
5. 有可能小程序开发工具会报错  具体问题具体处理