uniapp小步伐自定义头部(简单)

uniapp项目小步伐中难免会有一些页面必要自定义头部导航区域，由于原生的头部太大略了，本文记载下uniapp自定义小步伐的头部导航。
首先要把小步伐自带的头部去掉，在pages.json中把该页面的导航设置设为custom就可以了，添加下面这一行

1. "navigationStyle": "custom"

复制代码

写本身的导航栏：

1. <template>
2.   <view class="content">
3.     <view class="topNav">
4.       <view class="nav-left">
5.         耀南
6.       </view>
7.       <view class="nav-search">
8.         <input type="text" placeholder="请搜索" placeholder-class="placClass" />
9.       </view>
10.     </view>
11.   </view>
12. </template>
14. <script>
15.   export default {
16.     data() {
17.       return {
19.       }
20.     },
21.     methods: {
23.     }
24.   }
25. </script>
27. <style scoped>
28.   .topNav {
29.     height: 100rpx;
30.     background-color: #00aa7f;
31.     display: flex;
32.     justify-content: flex-start;
33.     align-items: center;
34.     padding: 0 20rpx;
35.     box-sizing: border-box;
36.   }
38.   .nav-left {
39.     font-size: 36rpx;
40.     font-weight: 600;
41.     color: #ffeb3b;
42.     margin-right: 30rpx;
43.     font-style: italic;
44.   }
46.   .nav-search input {
47.     width: 60%;
48.     height: 62rpx;
49.     border-radius: 30rpx;
50.     padding-left: 25rpx;
51.     background-color: #f0f8ffa6;
52.     box-sizing: border-box;
53.   }
55.   .placClass {
56.     font-size: 24rpx;
57.     color: #fff;
58.   }
59. </style>

复制代码

由于原来自带的头部被去掉了，那么本身写的导航区域就会顶到最上面，以至于和手机的状态栏重叠，而且还显示不全，接下来就是重点

• 怎样让本身写的导航栏避开手机的状态栏
  
• 并且要与小步伐的胶囊按钮水平对齐
  

盼望的效果：

要完成这个效果你可能说直接用定位top值给他定下来不就可以了，但是这个top值是多少我们并不好把握，如果写一个固定的top值，那么就会造成一个问题，由于手机型号的不同，这个top值是不同的，所以就会在不同的手机上显示不一，无法做到统一。
精确做法：
必要通过uni.getSystemInfoSync获取到当前手机的状态栏区域的高度和手机型号，然后直接给页面设置一个padding-top，值就是状态栏区域的高度，这样就刚好避开手机状态栏

 然后怎样让本身写的导航栏与小步伐的胶囊按钮水平对齐，这个就必要盘算导航栏的高度了
导航栏高度 = 手机状态栏高度 + 40（ios）或44（安卓）
通过获取到的手机型号来判断，如果是ios就+40px，否则就+44px。

导航栏的高度有另一种盘算方式
导航栏高度 = 手机状态栏高度 + 胶囊按钮的高度 + 胶囊按钮上下边距
胶囊按钮的相关信息获取：

1. const menuBtn = wx.getMenuButtonBoundingClientRect()
2. console.log('胶囊按钮信息',menuBtn)

复制代码

终极效果：在不同的手机上都显示正常

到此，位置已经调解好，导航栏内里详细内容就可以随便写了，比方常见的左侧可能是个位置定位等...

完整源码

1. <template>
2.   <view class="content">
3.     <!-- 距离顶部的距离 刚好留出状态栏即可 即statusBarHeight -->
4.     <view class="topNav" :style="{height:navHeight+'px',paddingTop:statusBarHeight+'px'}">
5.       <view class="nav-left">
6.         耀南
7.       </view>
8.       <view class="nav-search">
9.         <input type="text" placeholder="请搜索" placeholder-class="placClass" />
10.       </view>
11.     </view>
12.   </view>
13. </template>
15. <script>
16.   export default {
17.     data() {
18.       return {
19.         navHeight: "", // 导航栏高度
20.         statusBarHeight: '', // 状态栏高度
21.       }
22.     },
23.     onLoad() {
24.       //获取手机系统的信息 里面有状态栏高度和设备型号
25.       let {
26.         statusBarHeight,
27.         system
28.       } = uni.getSystemInfoSync()
29.       // 注意返回的单位是px 不是rpx
30.       console.log('状态栏高度是', statusBarHeight + 'px', '设备型号是', system);
31.       this.statusBarHeight = statusBarHeight
32.       // 而导航栏的高度则 = 状态栏的高度 + 判断机型的值（是ios就+40，否则+44）
33.       // 这个高度刚好和胶囊对齐
34.       this.navHeight = statusBarHeight + (system.indexOf('iOS') > -1 ? 40 : 44)
35.       console.log(this.navHeight, "导航栏高度");
36.     },
38.     methods: {
40.     }
41.   }
42. </script>
44. <style scoped>
45.   .topNav {
46.     height: 100rpx;
47.     background-color: #00aa7f;
48.     display: flex;
49.     justify-content: flex-start;
50.     align-items: center;
51.     padding: 0 20rpx;
52.     box-sizing: border-box;
53.   }
55.   .nav-left {
56.     font-size: 36rpx;
57.     font-weight: 600;
58.     color: #ffeb3b;
59.     margin-right: 30rpx;
60.     font-style: italic;
61.   }
63.   .nav-search input {
64.     width: 60%;
65.     height: 62rpx;
66.     border-radius: 30rpx;
67.     padding-left: 25rpx;
68.     background-color: #f0f8ffa6;
69.     box-sizing: border-box;
70.   }
72.   .placClass {
73.     font-size: 24rpx;
74.     color: #fff;
75.   }
76. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。