先说问题
要做个限定高度的局部滚动,需要获取微信小程序原生布局在各个机型下的tabBar
的准确高度。
翻查了几圈,因小程序新旧版本问题、程序员叙述能力、安全区问题、代码交叉复杂度问题等多个问题,至今没有直接发现正确便捷的获取方法。
只能自己翻腾了。
直接上代码
//获取微信小程序原生布局的基础高度 (navBar, tabBar,...)
getWmpHeightInfo: function(){
const Ret = {
pRatio:0,screen:0,status:0,navBar:0,
window:0,tabBar:0,safBot:0,log:{
navInfo:{},winInfo:{},
pRatio:"pRatio(设备基础像素比): = wx.getWindowInfo().pixelRatio",
screen:"screen(手机可视屏总高): = wx.getWindowInfo().screenHeight",
status:"status(手机顶部状态栏): = wx.getWindowInfo().statusBarHeight",
navBar:"navBar(小程序的顶导航): = wx.getMenuButtonBoundingClientRect().height + padding*2 | 顶导航胶囊默认上下等边距,定制navBar时待核实",
window:"window(小程序的内容窗): = wx.getWindowInfo().windowHeight | 不含navBar和tabBar",
tabBar:"tabBar(小程序的底导航): = screen-status-navBar-window-safBot | 定制navBar时待核实",
safBot:"safBot(手机底部安全区): 除苹果手机外,其它机型不一定有, 依据winInfo.safeArea可计算",
notice:"注意:\n"
+"1. 所有的高度单位均为px\n"
+"2. 屏总高 = 状态栏 + 顶导航 + 内容窗 + 底导航 + 底安区\n"
+"3. 仅支持原生布局,定制导航和tabBar后不确定"
}
};
Ret.log.navInfo = wx.getMenuButtonBoundingClientRect();
Ret.log.winInfo = wx.getWindowInfo();
Ret.pRatio = Ret.log.winInfo.pixelRatio;
Ret.screen = Ret.log.winInfo.screenHeight;
Ret.status = Ret.log.winInfo.statusBarHeight;
Ret.navBar = Ret.log.navInfo.height+(Ret.log.navInfo.top-Ret.status)*2;
Ret.window = Ret.log.winInfo.windowHeight;
Ret.safBot = Ret.log.winInfo.safeArea?Ret.screen-Ret.log.winInfo.safeArea.bottom:0;
Ret.tabBar = Ret.screen-Ret.status-Ret.navBar-Ret.window-Ret.safBot;
// console.log(Ret);
return Ret;
},
注意事项
- 代码只能用于原生布局,不解决定制
navBar
和tabBar
的情况。 - 导航胶囊的上下
padding
是否相等,还需要继续严谨测试。 - 苹果安全区,我没空研究了,需要的话请自己查资料研究。
吐槽
- 精细化的技术文档是体现技术实力的关键一部分。
- 官方文档需要严谨,比如
wx.getWindowInfo().windowHeight
,应该明确描述不含自带navBar
和tabBar
的高度。 - 官方文档需要细化,可以使用折叠方式,扩增对应资料的细节解释和案例。
- 建议在各个文档页下面,附上评论区。这样不但能直观便捷的提供参考,还能促成持续优化文档。