uniapp-微信小程序开发随记 --自定义顶部栏的样式处理_uniapp自定义顶部导航栏微信小程序样式重叠-CSDN博客

本文链接：https://blog.csdn.net/weixin_44358678/article/details/124406346

本文档介绍了在UI设计图与实际小程序页面样式不匹配时，如何通过自定义导航栏来解决这一问题。具体步骤包括在pages.json中设置全局样式为custom，引用colorUI的cu-custom组件，并在App.vue中处理不同平台的适配。通过这种方法，可以消除小程序自带导航栏并实现与设计图一致的渐变效果。

摘要由CSDN通过智能技术生成

问题起因 --由于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. 有可能小程序开发工具会报错  具体问题具体处理