3.6.17 跳转到非tabbar页面 首页没有隐藏 导致下一个页面没有展示, 底部tabbar高度在非tabbar页面也占据了高度

[lonelyWalkor]

相关平台

H5

复现仓库

https://github.com/lonelyWalkor/taro-issus1.git
浏览器版本: chrome 102
使用框架: Vue 2

复现步骤

pnpm i安装依赖
npm run dev:h5
点击首页的按钮即可复现

期望结果

在页面跳转时首页正常隐藏
tabbbar在非tabbar页面不占高度

实际结果

页面一直显示不隐藏
tabbar在非tabbar页面也占用了页面高度

环境信息

Taro v3.6.17


  Taro CLI 3.6.17 environment info:
    System:
      OS: macOS 13.5.1
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 16.18.1 - /opt/homebrew/opt/nvm/versions/node/v16.18.1/bin/node
      Yarn: 1.22.19 - /opt/homebrew/opt/nvm/versions/node/v16.18.1/bin/yarn
      npm: 8.19.2 - /opt/homebrew/opt/nvm/versions/node/v16.18.1/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.17 => 3.6.17 
      @tarojs/components: 3.6.17 => 3.6.17 
      @tarojs/helper: 3.6.17 => 3.6.17 
      @tarojs/plugin-framework-vue2: 3.6.17 => 3.6.17 
      @tarojs/plugin-html: 3.6.17 => 3.6.17 
      @tarojs/plugin-platform-alipay: 3.6.17 => 3.6.17 
      @tarojs/plugin-platform-h5: 3.6.17 => 3.6.17 
      @tarojs/plugin-platform-jd: 3.6.17 => 3.6.17 
      @tarojs/plugin-platform-qq: 3.6.17 => 3.6.17 
      @tarojs/plugin-platform-swan: 3.6.17 => 3.6.17 
      @tarojs/plugin-platform-tt: 3.6.17 => 3.6.17 
      @tarojs/plugin-platform-weapp: 3.6.17 => 3.6.17 
      @tarojs/runtime: 3.6.17 => 3.6.17 
      @tarojs/shared: 3.6.17 => 3.6.17 
      @tarojs/taro: 3.6.17 => 3.6.17 
      @tarojs/taro-loader: 3.6.17 => 3.6.17 
      @tarojs/webpack5-runner: 3.6.17 => 3.6.17 
      babel-preset-taro: 3.6.17 => 3.6.17 
      eslint-config-taro: 3.6.17 => 3.6.17

[ZakaryCode]

页面一直显示不隐藏

click 事件重复调用导致段时间内跳转多次，暂无很好解决方案，可以在 handleClick 外套个 debounce 方法避免过快跳转导致的问题

tabbar在非tabbar页面也占用了页面高度

该问题确实存在，下一个版本修复，可以在 app 增加以下样式跳过该问题

body .taro-tabbar__container > .taro-tabbar__panel {
  overflow: hidden;
  max-height: 100vh;
}

body .taro-tabbar__container > .taro-tabbar__panel > .taro_page.taro_tabbar_page {
  max-height: calc(100vh - 50PX - constant(safe-area-inset-bottom));
  max-height: calc(100vh - 50PX - env(safe-area-inset-bottom));
}