uni-app攻克“微信小程序首页底部popup弹窗隐藏tababr”难题

前端

2023-05-24 19:28:49

在微信小程序中巧妙隐藏底部 TabBar，打造流畅体验

在构建微信小程序时，我们经常需要在页面底部弹出浮层（Popup）。然而，默认情况下，浮层会遮挡底部的 TabBar，影响用户体验。本文将深入探讨如何在 uni-app 中巧妙地隐藏 TabBar，为用户提供更加流畅无缝的使用体验。

一、跨平台开发利器：uni-app

uni-app 是一款强大的跨平台开发框架，助力开发者使用 JavaScript 语言打造跨 iOS、Android、微信小程序等多端平台的移动应用程序。凭借丰富的 UI 组件库，uni-app 赋予开发者快速构建高质量移动应用的能力。

二、微信小程序：灵活隐藏 TabBar

微信小程序的特殊之处在于其提供的隐藏 TabBar 的灵活性。通过简单的几步操作，即可实现浮层弹出时自动隐藏 TabBar 的效果。

设置 TabBar 自定义属性： 在页面 JSON 文件中，将 "tabBar.custom" 设为 true，启用自定义 TabBar。
添加自定义 TabBar 组件： 在页面 WXML 文件中，引入 "custom-tab-bar" 组件，用于控制 TabBar 的显示和隐藏。
动态计算 TabBar 高度： 在页面 JS 文件的 onLoad 函数中，使用 uni.getSystemInfo 函数获取屏幕高度和安全区域高度，进而计算自定义 TabBar 的高度。
设置 TabBar 高度： 利用 uni.setTabBarStyle 函数，将计算得到的自定义 TabBar 高度设置为 TabBar 的高度，实现隐藏 TabBar 的效果。

三、示例代码：实战演练

以下是一段完整的示例代码，展示了如何在 uni-app 中隐藏微信小程序的 TabBar：

// 页面 JSON 文件
{
  "tabBar": {
    "custom": true
  }
}

// 页面 WXML 文件
<custom-tab-bar></custom-tab-bar>

// 页面 JS 文件
onLoad() {
  uni.getSystemInfo({
    success: function(res) {
      var customTabBarHeight = res.windowHeight - res.safeArea.bottom;
      uni.setTabBarStyle({
        height: customTabBarHeight + 'px'
      })
    }
  })
}