system.js 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. const SYSTEM_INFO = uni.getSystemInfoSync();
  2. /**
  3. * 状态栏高度
  4. * @returns {number}
  5. */
  6. export const getStatusBarHeight = () => {
  7. return SYSTEM_INFO.safeAreaInsets.top || 0;
  8. }
  9. /**
  10. * 获取胶囊按钮高度(即微信小程序上边的按钮)
  11. * @returns {number}
  12. */
  13. export const getCapsuleBarHeight = () => {
  14. if (uni.getMenuButtonBoundingClientRect) {
  15. let {
  16. top,
  17. height
  18. } = uni.getMenuButtonBoundingClientRect();
  19. return height + (top - getStatusBarHeight()) * 2;
  20. }
  21. return 40;
  22. }
  23. /**
  24. * 获取胶囊按钮信息(即微信小程序上边的按钮)
  25. * capsuleBarHeight 胶囊按钮栏高度
  26. * capsuleBarLeft 胶囊按钮栏左边距离
  27. * capsuleBarMargin 胶囊按钮栏边距
  28. * capsuleBarMarginTop 胶囊按钮栏上边距
  29. * capsuleBarMarginBottom 胶囊按钮栏下边距
  30. * capsuleBarContentHeight 胶囊按钮内容高度
  31. * @returns {{capsuleBarHeight: number, capsuleBarLeft: number, capsuleBarMarginTop: number, capsuleBarMarginBottom: number, capsuleBarContentHeight: number}}
  32. */
  33. export const getCapsuleBarInfo = () => {
  34. if (uni.getMenuButtonBoundingClientRect) {
  35. let { top, height, left} = uni.getMenuButtonBoundingClientRect();
  36. let barMargin = top - getStatusBarHeight()
  37. return {
  38. "capsuleBarHeight": height + barMargin * 2,
  39. "capsuleBarLeft": left,
  40. "capsuleBarMargin": barMargin,
  41. "capsuleBarMarginTop": barMargin,
  42. "capsuleBarMarginBottom": barMargin,
  43. "capsuleBarContentHeight": height
  44. }
  45. }
  46. return {
  47. "capsuleBarHeight": 40,
  48. "capsuleBarLeft": SYSTEM_INFO.screenWidth,
  49. "capsuleBarMargin": 4,
  50. "capsuleBarMarginTop": 4,
  51. "capsuleBarMarginBottom": 4,
  52. "capsuleBarContentHeight": 32
  53. };
  54. }
  55. /**
  56. * 获取安全区数据
  57. * statusBarHeight: 状态栏高度
  58. * capsuleBarHeight: 胶囊按钮高度
  59. * topHeight: 状态栏+胶囊按钮高度
  60. * bottomHeight: 底部安全区高度
  61. * capsuleBarLeft 胶囊按钮栏左边距离
  62. * capsuleBarMargin 胶囊按钮栏边距
  63. * capsuleBarMarginTop 胶囊按钮栏上边距
  64. * capsuleBarMarginBottom 胶囊按钮栏下边距
  65. * capsuleBarContentHeight 胶囊按钮内容高度
  66. * @returns {{topHeight: number, bottomHeight: number, statusBarHeight: number, capsuleBarHeight: number, capsuleBarLeft: number, capsuleBarMarginTop: number, capsuleBarMarginBottom: number, capsuleBarContentHeight: number}}
  67. */
  68. export const getSafeArea = () => {
  69. // TODO 测试代码待删除
  70. console.log("safeArea出发啦啦啦");
  71. let tempSafeArea = getCapsuleBarInfo();
  72. tempSafeArea.statusBarHeight = getStatusBarHeight();
  73. tempSafeArea.bottomHeight = SYSTEM_INFO.safeAreaInsets.bottom || 0;
  74. tempSafeArea.topHeight = getStatusBarHeight() + tempSafeArea.capsuleBarHeight;
  75. console.log("safeArea", tempSafeArea);
  76. return tempSafeArea;
  77. }