uni-app tabBar页面高度计算不正确

uni-app tabBar页面高度计算不正确

开发环境 版本号 项目创建方式
Windows 10 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：10

HBuilderX类型：正式

HBuilderX版本号：3.2.1

手机系统：Android

手机系统版本号：Android 7.1.1

手机厂商：模拟器

手机机型：雷电

页面类型：nvue

打包方式：离线

项目创建方式：HBuilderX

示例代码：

页面配置：

{  
    "path": "pages/test",  
    "style": {  
        "navigationBarTitleText": "test",  
        "navigationStyle": "custom",  
        "disableScroll": true,  
        "app-plus": {  
            "titleNView": false,  
            "subNVues": [{  
                "id": "navbar",  
                "path": "pages/navbar"  
                "type": "navigationBar"  
            }]  
        }  
    }  
},

页面代码：

<template>  
    <list class="list">  
        <cell v-for="num in lists" :key="num">  
            <text>{{ num }}</text>  
        </cell>  
    </list>  
</template>  

<style>  
.list {  
    flex: 1;  
}  
</style>  

<script>  
export default {  
    data() {  
        return {  
            lists: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99]  
        }  
    },  
    onReady() {  
        console.log(uni.getSystemInfoSync().windowHeight)  
    },  
}  
</script>

更多关于uni-app tabBar页面高度计算不正确的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

又测试了下 刚好多了navbar的高度

更多关于uni-app tabBar页面高度计算不正确的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在nvue页面中，tabBar页面的高度计算确实需要特殊处理。根据你的配置，问题可能出现在以下几个方面：

  1. 自定义导航栏影响：你使用了navigationStyle: "custom"和subNVues自定义导航栏，这会改变页面可用高度。但tabBar高度不会自动从windowHeight中扣除。

  2. nvue页面特性：nvue页面的布局计算与vue页面不同，需要手动处理安全区域和tabBar高度。

解决方案：

<template>
    <list class="list" :style="listStyle">
        <cell v-for="num in lists" :key="num">
            <text>{{ num }}</text>
        </cell>
    </list>
</template>

<script>
export default {
    data() {
        return {
            lists: [...],
            listStyle: {
                flex: 1
            }
        }
    },
    onReady() {
        this.calculateHeight()
    },
    methods: {
        calculateHeight() {
            const systemInfo = uni.getSystemInfoSync()
            const windowHeight = systemInfo.windowHeight
            
            // 获取tabBar高度（通常为50px，但需考虑设备差异）
            let tabBarHeight = 50
            if (systemInfo.platform === 'ios') {
                // iOS可能需要考虑底部安全区域
                tabBarHeight += systemInfo.safeAreaInsets?.bottom || 0
            }
            
            // 计算实际可用高度
            const usableHeight = windowHeight - tabBarHeight
            
            this.listStyle = {
                flex: 1,
                height: usableHeight + 'px'
            }
            
            console.log('可用高度:', usableHeight)
        }
    }
}
</script>
回到顶部