uniapp开发小程序自定义标题栏
1.在pages.json文件中
{"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 24pxif (platform.toLowerCase() == "android" ){height +=4 //android 28px}// 胶囊高度 32px 下边框6px height 状态栏高度return height+ 38 + "px"}},3.在view中应用高度
:style="indexSearchBar"或
:style="{top : height}"4.设置导航栏：
<view class="custom flex_center" style="padding-top:{{statusBarHeight}}px"> <image class='nav_logo' src='{{staticImg}}index/nav_logo.png'></image> <view class='navInput'> <image src='{{staticImg}}index/nav_search.png'></image> <input placeholder='搜索你想要的内容' placeholder-class='none' placeholder-style='color:#b3b3b3;font-size:22rpx;'></input> </view></view><view class="empty_custom" style="padding-top:{{statusBarHeight}}px"></view>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