[ 自定义tabbar内容区域问题 ] 自定义tabbar没办法获取精准的安全区域

[keyboard2005]

相关平台

微信小程序

复现仓库

https://github.com/keyboard2005/custom-tabbar-vue3.git
小程序基础库: 3.5.2
使用框架: vue3

复现步骤

开启自定义导航后 设置高度100vh即可 没办法设置安全区域 获取不到精确的自定义任务栏的高度 什么环境变量啊 之类的获取到的都是错误的

期望结果

希望能和原版tabbar一样自动计算 100vh也不会包含到tabbar

实际结果

自定义tabbar遮挡住了我的内容 并且我没办法获取到精准的值设位置我的内容高度

环境信息

Debugger attached.
👽 Taro v4.0.4


  Taro CLI 4.0.4 environment info:
    System:
      OS: Windows 10 10.0.19045
    Binaries:
      Node: 16.20.2 - C:\Program Files\nodejs\node.EXE       
      Yarn: 1.22.22 - ~\AppData\Roaming\npm\yarn.CMD
      npm: 10.8.2 - ~\AppData\Roaming\npm\npm.CMD
    npmPackages:
      @tarojs/cli: 4.0.4 => 4.0.4
      @tarojs/components: 4.0.4 => 4.0.4
      @tarojs/helper: 4.0.4 => 4.0.4
      @tarojs/plugin-framework-vue3: 4.0.4 => 4.0.4
      @tarojs/plugin-platform-alipay: 4.0.4 => 4.0.4
      @tarojs/plugin-platform-h5: 4.0.4 => 4.0.4
      @tarojs/plugin-platform-harmony-hybrid: 4.0.4 => 4.0.4 
      @tarojs/plugin-platform-jd: 4.0.4 => 4.0.4
      @tarojs/plugin-platform-qq: 4.0.4 => 4.0.4
      @tarojs/plugin-platform-swan: 4.0.4 => 4.0.4
      @tarojs/plugin-platform-tt: 4.0.4 => 4.0.4
      @tarojs/plugin-platform-weapp: 4.0.4 => 4.0.4
      @tarojs/runtime: 4.0.4 => 4.0.4
      @tarojs/shared: 4.0.4 => 4.0.4
      @tarojs/taro: 4.0.4 => 4.0.4
      @tarojs/vite-runner: 4.0.4 => 4.0.4
      babel-preset-taro: 4.0.4 => 4.0.4
      eslint-config-taro: 4.0.4 => 4.0.4

Waiting for the debugger to disconnect...

[gMorning-Wp]

您原来使用的是原生tabbar吧。原生tabbar属于原生的组件，不在小程序webview壳子内，而使用了自定义tabbar后tabbar属于webview内部的一部分了。您需要动态算一下展示区域，刨除tabbar高度

[keyboard2005]

您原来使用的是原生tabbar吧。原生tabbar属于原生的组件，不在小程序webview壳子内，而使用了自定义tabbar后tabbar属于webview内部的一部分了。您需要动态算一下展示区域，刨除tabbar高度

我知道啊 问题是 算不出来 各种方法都尝试了 获取不到自定义tabbar的高度的 因为实际编写代码的px 和 小程序预览的不一样 因为会自动转换 所以没办法获取到精确的自定义tabbar的高度

[gMorning-Wp]

您原来使用的是原生tabbar吧。原生tabbar属于原生的组件，不在小程序webview壳子内，而使用了自定义tabbar后tabbar属于webview内部的一部分了。您需要动态算一下展示区域，刨除tabbar高度

我知道啊 问题是 算不出来 各种方法都尝试了 获取不到自定义tabbar的高度的 因为实际编写代码的px 和 小程序预览的不一样 因为会自动转换 所以没办法获取到精确的自定义tabbar的高度

<template>
  <view class="index" 
    :style="computedStyle"
   >
    <text>共10条数据</text>
    <text v-for="item in 10">我是首页！aaasdsa {{ item }}</text>
  </view>
</template>

<script>
import Taro,{ pxTransform } from '@tarojs/taro'
export default {
  name: 'Index',
  data() {
    console.log('addd',Taro.getSystemInfoSync())

    const res = Taro.getSystemInfoSync() || {};
    const isIphoneX = res.safeArea?.top > 40;
    return {
      computedStyle: {
        height: `calc(100vh - ${isIphoneX ? pxTransform(160): pxTransform(100) })`,

      }
    }
  }
}

</script>


<style>
.index{
  width: 100%;
  background-color: yellow;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
}
</style>

这样就可以了～

[gMorning-Wp]

这是一个微信小程序开发的问题，您如果还有问题的话，可以尝试去微信社区交流一下～ 我这边就先关issue了哈

[keyboard2005]

这是一个微信小程序开发的问题，您如果还有问题的话，可以尝试去微信社区交流一下～ 我这边就先关issue了哈

爱你 解决了