uniapp开发小程序单页面自定义标题栏

{
			"path": "pages/zhixuanpages/searchList/searchList",
			 "style": {
                "navigationStyle": "custom",
				"h5":{
					"titleNView":false
				}
            }
		},

2.在单页面的data(){}函数中获取手机通知栏高度

indexSearchBar:'padding-top: '+uni.getSystemInfoSync().statusBarHeight+'px'

或

computed: {
		height(){
			const {platform,statusBarHeight} = uni.getSystemInfoSync()
			let height = statusBarHeight +4 //ios 24px
			if (platform.toLowerCase() == "android" ){
				height +=4 //android 28px
			}
			// 胶囊高度 32px 下边框6px height 状态栏高度
			return height+ 38 + "px"
		}
	},

3.在view中应用高度

:style="indexSearchBar"

或

:style="{top : height}"

4.设置导航栏：

5.设置样式

/* 自定义导航栏开始 */
.custom{
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  height: 45px;
  /* background: #c00; */
  z-index: 999;
  background: #fff;
}
.nav_logo{
  float: left;
  margin-left: 22rpx;
  margin-top: 22rpx;
  margin-right: 15rpx;
  display: block;
  width:61rpx;
  height:47rpx;
}
.navInput{
  float: left;
  margin-top: 16rpx;
  width: 440rpx;
  height: 58rpx;
  overflow: hidden;
  box-sizing: border-box;
  padding-left: 60rpx;
  background: #eeeeee;
  border-radius: 40rpx;
  position: relative;
}
.navInput image{
  position: absolute;
  left: 12rpx;
  top: 13rpx;
  width:40rpx;
  height:40rpx;
}
.navInput input{
  width: 100%;
  height: 58rpx;
  background: #eeeeee;
  font-size: 22rpx;
}
.custom text{
  display: inline-block;
  color: #fff;
  font-size: 34rpx;
  font-weight: 500;
  max-width: 280rpx;
}
.empty_custom{
  height: 45px;
  width: 100%;
}
/* 自定义导航栏结束 */

注意：custom和empty_custom的高度是px的单位，因为app.js中动态获取的标题栏高度单位是px,（最后不要动这个高度单位，其他自己写的样式可以统一写为rpx即可）

借鉴自：https://www.cnblogs.com/xinheng/p/10848720.html?tdsourcetag=s_pcqq_aiomsg