uniApp 自定义头部导航栏

先上效果图 写的比较难看第一次写，自己记录过程。

 

 

uniApp要自定义导航栏需要在page.json文件中将对应你需要自定义导航栏的页面进行配置

"pages": [{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "",
				"enablePullDownRefresh": false, //禁止下拉刷新
				"navigationStyle":"custom"
			}

		}, 
]

比如我这里将 navigationStyle 改为 custom 这样uni自带的导航栏就会消失 就可以在页面上写自定义的导航栏了




Css 





我的导航栏写好之后，我是用父组件去传递参数控制他在页面的高度，因为每个机型状态栏的高度可能不一样，所以fixed定位不能写死。

我是用传参的方式去控制他的高度 ，uniApp自带一个api可以查询到胶囊的高度 我们只需要让我们导航栏的Top和胶囊一样就可以完美适配了。



//用于控制顶部搜索栏的颜色参数
				ScrollObjStyle: {
					BoxBgColor: 'rgba(255,255,255,0)', //开始时透明色
					top: '48rpx', //子元素位移值 后续可能要根据不同设备进行匹配暂定小程序适配
					left: '29rpx', //同上
					CityColor: '#ffffff', //城市颜色 ,
					leftBoxBgColor: 'rgba(240, 240, 240,.3)', //输入框盒子的颜色'
					placeHoladerColor: false, //控制切换placeHolder的文字颜色
					searchIcon: '../../static/tabBar/whiteSearch.png', //搜索框的图片切换
					DownIcon: '../../static/tabBar/whiteIconDown.png',
					lineBg: '#ffffff', //线条颜色
				},


这个top 就是导航栏的高度 默认值  一会儿我们每次进入时 检测是wx小程序，就直接调用方法修改他即可。

getCapsule() {
				//获取胶囊位置并改变顶部自定义导航栏的位置
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				console.log(menuButtonInfo, '胶囊top位置')
				//让自定义导航栏头部组件始终和胶囊对齐 做到兼容各手机型号
				this.ScrollObjStyle.top = menuButtonInfo.top+'px';
			},


这样就好了，效果就和图片那样进行对齐了。