微信小程序可以设置自定义标题栏，可以针对不同页面单独设置
1.在页面文件.json文件中，设置如下属性，自定义导航栏和导航栏样式"navigationStyle":"custom","navigationBarTextStyle":"white",
特别是第二个navigationBarTextStyle属性可以将胶囊样式调整为透明效果
2.设置自定义导航栏布局样式动效逻辑等
3.划重点！！！导航栏中状态栏高度导航栏高度胶囊高度，需要得知这三个属性进行布局+兼容
这里的尺寸都是px为单位的！
3.1状态栏高度
状态栏指的是显示手机的时间电量信号等信息的一块区域。参考如下图
市场上使用的手机状态栏高度有多种，如刘海屏全面屏iOS特殊型号和安卓其他型号。
获取状态栏高度的方法：调用微信wx.getSystemInfoSync()API获取状态栏高度
3.2导航栏高度
胶囊和功能按钮显示的区域。参考如下图片
导航栏高度获取方法：安卓48pxiOS40px这个是固定的。真机环境下，编辑器有误差
3.3胶囊高度
各种机型测试的结果下都是32px
4.滚动页面改变标题栏不透明度
此处建议使用pages的一个监听事件onPageScroll监听页面滚动。设置标题栏背景的不透明度rgba
这个需要注意的是合理使用setData不能每次滚动都设置数据，不然可能导致页面卡顿等影响
测试机型：
Andorid:小米6小米mix3oppoR9s
iPhone:7Pxxsxr
相关代码：
// 设置导航栏高度setNavigation() {// 获取设备系统信息，单位pxconst systemInfo = wx.getSystemInfoSync()// 状态栏高度const statusBarHeight = systemInfo.statusBarHeight// iOS真机 胶囊区高度 40let navigationHeight = 40// 胶囊区域高度，安卓48if (systemInfo.system.indexOf('Android') !== -1) {navigationHeight = 48}// 设置this.setData({statusBarHeight: statusBarHeight,navigationHeight: navigationHeight,systemWidth: systemInfo.screenWidth})// 右上角胶囊，高度32px。每个设备都一致},// 监听页面滚动onPageScroll: function(e) {// 只在规定区域setDataif (e.scrollTop < this.data.systemWidth) {const opacity = (e.scrollTop * 2) / this.data.systemWidthif (opacity >= 1) {if (this.data.statusBarOpacity !== 1) {this.setData({statusBarOpacity: opacity})}} else {this.setData({statusBarOpacity: opacity})}}}
