高适应性的自定义导航栏开发思路
[图片] 非自定义导航栏高度怎么计算? 自定义导航栏高度由谁决定? 小程序自定义导航栏开发注意点与参考文档 一、默认导航栏高度怎么计算?(非custom情况下获取) wx.getSystemInfo 和 wx.getSystemInfoSync 获取机器信息 screenHeight - windowHeight 计算标题栏高度 [代码]{[代码][代码] [代码][代码]'iPhone'[代码][代码]: 64,[代码][代码] [代码][代码]'iPhone X'[代码][代码]: 88,[代码][代码] [代码][代码]'android'[代码][代码]: 68[代码][代码] [代码][代码]}[代码]不完全统计(ip6 , ip5 , ip6p , ipx , 小米mix2 , 小米5等综合了开发工具提供的数据和真机数据)所得 二、自定义导航栏高度由谁决定?(自定义情况下,屏幕高度和窗口高度没有差别,所以要通过步骤1先获取数据,预定义到代码中) 开发时发现,自定义导航栏的实现需要 包含状态栏+胶囊 :没有自定义导航栏的时候页面是全屏幕滚动会出现在状态栏的下一层 根据上一标题中步骤1的函数,可以获得状态栏高度 statusBarHeight demo,点击打开小程序开发工具 三、小程序自定义导航栏开发注意点与参考文档 微信官方设计指导中关于胶囊按钮的描述 由此得知胶囊宽度87pt=116px,设置之后,的确能产生较好的兼容性效果 社区Q&A:自定义标题栏高度计算、在 navigationStyle: 'custom',苹果X和8兼容问题 注意某些方法、参数的兼容性,时刻关注官方更新信息 开一个项目采集设备的screenHeight,windowHeight,pixelRatio等信息到一个数据库中,或者微信可以提供这样一个数据库便于计算,亦或者微信优化自定义标题栏(譬如通知栏可以改变颜色但不要算在自定义范围内,给出胶囊宽高到通知栏距离到右侧屏幕边框距离等相关参数)