uniapp小步伐自定义头部(简单)
uniapp项目小步伐中难免会有一些页面必要自定义头部导航区域，由于原生的头部太大略了，本文记载下uniapp自定义小步伐的头部导航。首先要把小步伐自带的头部去掉，在pages.json中把该页面的导航设置设为custom就可以了，添加下面这一行
https://i-blog.csdnimg.cn/direct/0c18a6e5b1e8475ea4408687bc51b986.png
"navigationStyle": "custom" https://i-blog.csdnimg.cn/direct/a309ce96e0604451bd9f0a25090866de.png
写本身的导航栏：
<template>
<view class="content">
<view class="topNav">
<view class="nav-left">
耀南
</view>
<view class="nav-search">
<input type="text" placeholder="请搜索" placeholder-class="placClass" />
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style scoped>
.topNav {
height: 100rpx;
background-color: #00aa7f;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0 20rpx;
box-sizing: border-box;
}
.nav-left {
font-size: 36rpx;
font-weight: 600;
color: #ffeb3b;
margin-right: 30rpx;
font-style: italic;
}
.nav-search input {
width: 60%;
height: 62rpx;
border-radius: 30rpx;
padding-left: 25rpx;
background-color: #f0f8ffa6;
box-sizing: border-box;
}
.placClass {
font-size: 24rpx;
color: #fff;
}
</style> https://i-blog.csdnimg.cn/direct/53e0099badd5469abe21ef9f5618e7a2.png
由于原来自带的头部被去掉了，那么本身写的导航区域就会顶到最上面，以至于和手机的状态栏重叠，而且还显示不全，接下来就是重点
[*] 怎样让本身写的导航栏避开手机的状态栏
[*] 并且要与小步伐的胶囊按钮水平对齐
盼望的效果：
https://i-blog.csdnimg.cn/direct/d94ea613a1b34d569b655afd2146f1c5.png
要完成这个效果你可能说直接用定位top值给他定下来不就可以了，但是这个top值是多少我们并不好把握，如果写一个固定的top值，那么就会造成一个问题，由于手机型号的不同，这个top值是不同的，所以就会在不同的手机上显示不一，无法做到统一。
精确做法：
必要通过uni.getSystemInfoSync获取到当前手机的状态栏区域的高度和手机型号，然后直接给页面设置一个padding-top，值就是状态栏区域的高度，这样就刚好避开手机状态栏
https://i-blog.csdnimg.cn/direct/f59a29b780c04df782ac8eeae015b089.png 然后怎样让本身写的导航栏与小步伐的胶囊按钮水平对齐，这个就必要盘算导航栏的高度了
导航栏高度 = 手机状态栏高度 + 40（ios）或44（安卓）
通过获取到的手机型号来判断，如果是ios就+40px，否则就+44px。
https://i-blog.csdnimg.cn/direct/73816553e4e6492c81765a8e7cacacbd.png
导航栏的高度有另一种盘算方式
导航栏高度 = 手机状态栏高度 + 胶囊按钮的高度 + 胶囊按钮上下边距
胶囊按钮的相关信息获取：
const menuBtn = wx.getMenuButtonBoundingClientRect()
console.log('胶囊按钮信息',menuBtn) 终极效果：在不同的手机上都显示正常
https://i-blog.csdnimg.cn/direct/f87d45c87f964dcdbfd8c78b50d4fbf4.png到此，位置已经调解好，导航栏内里详细内容就可以随便写了，比方常见的左侧可能是个位置定位等...
完整源码
<template>
<view class="content">
<!-- 距离顶部的距离 刚好留出状态栏即可 即statusBarHeight -->
<view class="topNav" :style="{height:navHeight+'px',paddingTop:statusBarHeight+'px'}">
<view class="nav-left">
耀南
</view>
<view class="nav-search">
<input type="text" placeholder="请搜索" placeholder-class="placClass" />
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
navHeight: "", // 导航栏高度
statusBarHeight: '', // 状态栏高度
}
},
onLoad() {
//获取手机系统的信息 里面有状态栏高度和设备型号
let {
statusBarHeight,
system
} = uni.getSystemInfoSync()
// 注意返回的单位是px 不是rpx
console.log('状态栏高度是', statusBarHeight + 'px', '设备型号是', system);
this.statusBarHeight = statusBarHeight
// 而导航栏的高度则 = 状态栏的高度 + 判断机型的值（是ios就+40，否则+44）
// 这个高度刚好和胶囊对齐
this.navHeight = statusBarHeight + (system.indexOf('iOS') > -1 ? 40 : 44)
console.log(this.navHeight, "导航栏高度");
},
methods: {
}
}
</script>
<style scoped>
.topNav {
height: 100rpx;
background-color: #00aa7f;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0 20rpx;
box-sizing: border-box;
}
.nav-left {
font-size: 36rpx;
font-weight: 600;
color: #ffeb3b;
margin-right: 30rpx;
font-style: italic;
}
.nav-search input {
width: 60%;
height: 62rpx;
border-radius: 30rpx;
padding-left: 25rpx;
background-color: #f0f8ffa6;
box-sizing: border-box;
}
.placClass {
font-size: 24rpx;
color: #fff;
}
</style>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]