t***@gmail.com
t***@gmail.com
  • 发布:2020-02-23 17:28
  • 更新:2022-04-12 17:03
  • 阅读:1929

关于屏幕可用高度的问题

分类:uni-app

1、官网文档中有一句话:屏幕高度=状态栏高度+原生导航栏高度+可使用窗口高度+原生tabbar高度。
2、在我使用原生tabBar、禁用原生导航的情况下,我打印屏幕高度和可使用窗口高度:console.log(res.screenHeight, res.windowHeight)
3、最终输出的结果却显示为:[Number] 812 , [Number] 812

为何可使用窗口高度能够等于屏幕高度?最起码我的原生tabbar高度不为零啊???

追加:
为何我加了原生导航栏后再打印导航栏高度:navigationBarHeight 输出为 undefined 啊???原生导航栏显示的是正确的。并且其他的几个都能输出。

追加:
官网文档Tip1:屏幕高度=状态栏高度+原生导航栏高度+可使用窗口高度+原生tabbar高度
官网文档Tip2:H5端,windowHeight不包含NavigationBar和TabBar的高度
问题:根据官网文档Tip2,我是否可以得出App端:windowHeight包含NavigationBar和TabBar的高度 的结论?如果可以的话,那就跟官网文档Tip1矛盾了。

阶段性发现(关掉页面原生导航):当我在pages.json的tabBar项里设置"blurEffect": "extralight"开启高斯模糊,则能够像文档描述的那样正确打印可用窗口高度,可用窗口高度为屏幕高度-50。当我关闭高斯模糊,那么仍然显示可用窗口高度=屏幕高度。

2020-02-23 17:28 负责人:无 分享
已邀请:
DCloud_UNI_GSQ

DCloud_UNI_GSQ

navigationBarHeight 仅百度小程序支持
app和h5 均不包含navigationBar和tabBar
你是使用HBuilderX哪个版本测试的?
是否开启了v3编译模式?

  • t***@gmail.com (作者)

    使用了2.6.1,忘记了当时是不是v3模式。

    2020-03-11 16:00

  • t***@gmail.com (作者)

    如果windowHeight不包含navigationBar和tabBar的话,为何我打印的windowHeight和screenHeight相等呢?原生tabbar起码占据一定的高度吧?

    2020-03-11 16:02

  • DCloud_UNI_GSQ

    回复 t***@gmail.com: 对,应该占据,你是在何时打印的信息?onready之后吗?有没有测试工程

    2020-03-11 16:07

  • t***@gmail.com (作者)

    回复 DCloud_UNI_GSQ: 啊,我是在onload打印的,不过现在代码写了很多了,后面再验证重现一下吧

    2020-03-11 16:13

  • DCloud_UNI_GSQ

    回复 t***@gmail.com: 好的,回头你放onready试试,onload的时候页面可能还没初始化好

    2020-03-11 16:18

  • t***@gmail.com (作者)

    回复 DCloud_UNI_GSQ: <template>

    <view>

    <view :style="{height:height+'rpx'}" style="background-color: #007AFF;">


        </view>  
    </view>

    </template>


    <script>

    export default {

    data() {

    return {

    height: 0

    }

    },

    onReady() {

    uni.getSystemInfo({

    success(res) {

    let height = (res.windowHeight) * (750 / res.windowWidth)

    this.height = height

    console.log(this.height)

    }

    })

    },

    methods: {


        }  
    }

    </script>


    <style>

    </style>

    2020-03-13 13:56

  • t***@gmail.com (作者)

    回复 DCloud_UNI_GSQ: 当我手动设置height为res.windowheight打印的值时,发现view高度其实是超出了nav和tabbar中间的可用高度的。。。

    2020-03-13 14:00

  • DCloud_UNI_GSQ

    你this用错了,你改了这个问题再试试

    2020-03-17 15:17

  • t***@gmail.com (作者)

    回复 DCloud_UNI_GSQ: 可能之前我遇到的问题都是this用错了引起的...非常感谢解答!

    2020-03-18 15:33

  • t***@gmail.com (作者)

    回复 DCloud_UNI_GSQ: 难怪我改成getSystemInfoSync就可以了呢

    2020-03-18 15:34

Now橘子

Now橘子 - 学习交流

我打印的screenHeight 和 windowHeight相等

1***@qq.com

1***@qq.com

在mounted时获取的res.windowHeight正常,但是在onload和onshow时获取的res.windowHeight和res.screenHeight相等,不清楚为什么

  • MarkGo

    onready里用就好了,其他地方用价格setTimeout。原因是没初始化完。

    2022-04-12 18:25

该问题目前已经被锁定, 无法添加新回复