<meta name="source" content="lake">
微信小程序自定义头部-适配所有机型
编写和使用自定义头部，前提需要， 在app.json文件内，对需要使用自定义头部的页面需要增加一个 "navigationStyle": "custom" 属性 我这里是给了index页面这个属性。
image.png
此时index页面没有头部。
image.png
接下来就是核心内容的90%，（敲黑板）-
使用自定义头部，属于引用组件的形式。所以需要在 src/components下创建一个vue文件 cuCustom.vue
image.png
接下来就是写具体内容了--先说一下总体思想，获取设备系统通知栏高度和小程序保留的胶囊的高度，这两个高度结合在一起，就是这个组件的全部内容。
1.先获取设备通知栏高度
image.png
iphone 6/7/8 puls效果
image.png
iphone XR效果
image.png
这个肯定不是我们要的效果，因为没有胶囊的高度，于是就有:
2.获取胶囊高度
image.png
iphone 6/7/8 puls效果
image.png
iphone XR效果
image.png
最后,,就是核心内容的10%，（敲黑板) 引用自定义头部--
image.png
教程完。。。。
附上源码
<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><template> <div> <div :style="'height: '+(system_status_bar_height)+'px; width: 100%;background-color: red;'"></div> <div :style="'height: '+(jiaonang_status_bar_height)+'px; width: 100%;background-color: blue;'"></div> </div> </template> <script> export default { data() { return { system_status_bar_height: 0, //定义设备通知栏高度 jiaonang_status_bar_height: 0 //定义胶囊那一栏的高度 }; }, methods: {}, beforeMount() { let self = this; let system_info = {}; //获取设备系统信息 为了拿设备头部通知栏高度 wx.getSystemInfo({ success(system) { //此方法是微信原生的写法，问我我也不能解释 system_info = system; self.system_status_bar_height = system.statusBarHeight; } }); //获取胶囊信息,emmm 这个也是微信原生的写法，问我我也不能解释 let jiaonang_info = wx.getMenuButtonBoundingClientRect(); //这个为什么这样计算我是上网查的，问我我也不能解释 this.jiaonang_status_bar_height = jiaonang_info.height + (jiaonang_info.top - system_info.statusBarHeight) * 2; } }; </script> <style> </style> </pre>
