uniapp小程序，自定义navBar、tabBar

1、先来说说自定义navBar&＃xff1b;

在自定义navBar时&＃xff0c;比较苦恼的就是根据不同的机型&＃xff0c;状态栏和导航栏的高度不定&＃xff1a;

注&＃xff1a;如果需要自定义navBar&＃xff0c;则在pages.json文件里配置

&＃xff08;1&＃xff09;如果只是想单纯获取状态栏&＃xff1a;可以用uni.getSystemInfo&＃xff08;&＃xff09;&＃xff1b;代码如下&＃xff1a;

打印的如下&＃xff1a;

&＃xff08;2&＃xff09;想要获取右上角胶囊的具体位置可以用uni.getMenuButtonBoundingClientRect&＃xff08;&＃xff09;&＃xff0c;这个好处就是既可以获取状态栏的高度也可以获取导航栏的高度&＃xff1b;代码如下&＃xff1a;

打印如下&＃xff1a;

&＃xff08;2&＃xff09;自定义tabBar

首先在pages.json里写tabBar&＃xff0c;代码如下&＃xff1a;

 例如&＃xff1a;当你在登录后进行跳转&＃xff0c;发现没有反应&＃xff08;如网上说的tarBar里list里的第一项必须是pages里的第一项&＃xff0c;并不是这样的&＃xff1b;&＃xff09;如果你跳转的是tabBar里的页面&＃xff0c;你跳转的方式应该用uni.switchTab&＃xff08;&＃xff09;&＃xff1b;tarBar页面之间也是用uni.switchTab&＃xff08;&＃xff09;&＃xff1b;

uni.switchTab&＃xff08;&＃xff09;这个方法跳转后的页面左上角是没有home按钮的&＃xff0c;其他的跳转方法有。

第一次写&＃xff0c;如有什么bug&＃xff0c;还望指出&＃xff0c;大家一起讨论&＃xff1b;更希望可以帮助到大家。