uniapp获取tabbar高度

一、uniapp tabbar高度

1.1、uniapp底部tabbar

uniapp是一款跨平台开发框架，它可以快速地实现多个平台上的应用程序开发。在uniapp开发中，底部的tabbar是一种常见的视图控件，它可以帮助用户轻松地访问应用程序的不同功能模块。但是，要实现一个合适的tabbar，就需要获取底部tabbar的高度。

1.2、uniapp获取tabbar高度

获取tabbar高度是一个非常基础而又重要的问题。在uniapp中，我们可以使用uni.getSystemInfo()方法来获取设备信息，其中包括底部菜单栏（tabbar）的高度。uni.getSystemInfo()方法返回一个JSON对象，包含了设备的各种信息。

uni.getSystemInfo({
    success: function (res) {
        console.log(res.statusBarHeight)
        console.log(res.screenHeight)
        console.log(res.windowHeight)
        console.log(res.windowWidth)
        console.log(res.pixelRatio)
        console.log(res.language)
        console.log(res.version)
        console.log(res.system)
        console.log(res.platform)
        console.log(res.fontSizeSetting)
        console.log(res.appId)
        console.log(res.deviceId)
        console.log(res.brand)
        console.log(res.model)
        console.log(res.sdkVersion)
        console.log(res.appName)
        console.log(res.appVersion)
        console.log(res.packageName)
        console.log(res.theme)
        
        console.log(res.tabBar)  //输出tabbar的信息
    }
});

上述代码中，我们可以看到res.tabBar这个属性，它是一个对象，其中包含了tabbar的属性，包括高度、背景颜色、位置等信息。我们可以直接通过res.tabBar.height来获取底部tabbar的高度。

uni.getSystemInfo({
    success: function (res) {
        var tabBarHeight = res.tabBar.height
        console.log(tabBarHeight)
    }
});

二、uniapp获取底部tabbar高度的注意事项

2.1、多平台适配

由于uniapp是一个跨平台开发框架，可以快速地实现多个平台上的应用程序开发。在不同的平台上，tabbar的高度可能是不同的。因此，在使用uni.getSystemInfo()方法获取tabbar高度时，应该对不同平台进行适配。以下是一些常见的平台的底部tabbar高度：

• 苹果iOS 14系统的底部tabbar高度是83px
• 苹果iOS 13系统及以下的底部tabbar高度是49px
• 安卓系统的底部tabbar高度是50px
• 微信小程序的底部tabbar高度是56px

因此，我们需要对这些平台进行特定的适配，才能获取正确的tabbar高度。

2.2、tabbar样式修改

有时候，我们需要对tabbar的样式进行修改，比如修改底部tabbar的高度、字体颜色等。如果使用uni.getSystemInfo()方法获取的tabbar高度，可能会因为我们修改样式的原因而失效。这个时候，我们可以手动设置tabbar的高度，再通过不同平台的适配来实现正确的tabbar高度。

// 取消默认选中状态
"tabBar": {
    "selectedColor": "#007AFF",
    "color": "#929292",
    "borderStyle": "white",
    "backgroundColor": "#ffffff",
    "position": "bottom",
    "list": [
        {
            "pagePath": "/pages/index/index",
            "text": "首页",
            "iconPath": "static/tabbar/icon_home.png",
            "selectedIconPath": "static/tabbar/icon_home_selected.png"
        },
        {
            "pagePath": "/pages/mine/mine",
            "text": "我的",
            "iconPath": "static/tabbar/icon_mine.png",
            "selectedIconPath": "static/tabbar/icon_mine_selected.png"
        }
    ]
},
// tabbar的高度单独定义，方便修改
"tabbar_height": 60

通过如上代码，我们可以在uniapp项目中定义一个tabbar高度的变量，然后通过CSS样式来修改tabbar的高度。

/* 在app.vue中定义底部tabbar的样式 */
.tab-bar {
    position: fixed;
    bottom: 0;
    height: var(--tabbar_height);  /* 引用tabbar高度的变量 */
    width: 100%;
    border-top: 1px solid #dcdcdc;
    background-color: #f9f9f9;
    z-index: 9999;
}

三、uniapp tabBar 图标选取

3.1、使用字体图标

在uniapp中，我们一般使用uni-icons来为tabbar添加图标。uni-icons是uniapp自带的字体图标库，它可以让我们更加方便地添加图标，同时也能够提高应用的性能。

// 引入uni-icons字体图标库
<unicomponents>
    <uni-icons/>
</unicomponents>

// 在tabBar的list中设置图标属性
"tabBar": {
    "color": "#7A7E83",
    "borderStyle": "black",
    "selectedColor": "#000000",
    "backgroundColor": "#ffffff",
    "list": [
        {
            "pagePath": "/pages/index/index",
            "iconPath": "/static/tabbars/home.png",
            "selectedIconPath": "/static/tabbars/homeSelected.png",
            "text": "首页"
        },
        {
            "pagePath": "/pages/mine/mine",
            "iconPath": "/static/tabbars/user.png",
            "selectedIconPath": "/static/tabbars/userSelected.png",
            "text": "我的"
        }
    ]
}

在list中，我们可以通过iconPath和selectedIconPath属性来设置tabbar的图标，而使用uni-icons的话，还可以通过icon属性设置tabbar的图标。

// 使用uni-icons字体图标库实现tabbar图标
"tabBar": {
    "color": "#7A7E83",
    "borderStyle": "black",
    "selectedColor": "#000000",
    "backgroundColor": "#ffffff",
    "list": [
        {
            "pagePath": "/pages/index/index",
            "icon": "uni-home",
            "text": "首页"
        },
        {
            "pagePath": "/pages/mine/mine",
            "icon": "uni-person",
            "text": "我的"
        }
    ]
}

3.2、使用图片图标

除了使用字体图标外，在uniapp中我们还可以使用图片图标来实现tabbar的图标。使用图片图标时，我们需要注意图标的大小和文件格式等问题。

// 在tabBar中设置图片路径
"tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#000000",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
        {
            "pagePath": "/pages/index/index",
            "iconPath": "/static/tabbars/home.png",
            "selectedIconPath": "/static/tabbars/homeSelected.png",
            "text": "首页"
        },
        {
            "pagePath": "/pages/mine/mine",
            "iconPath": "/static/tabbars/user.png",
            "selectedIconPath": "/static/tabbars/userSelected.png",
            "text": "我的"
        }
    ]
}

3.3、tabBar 图标规范

在设计tabBar图标时，应该遵循互联网设计领域的一些规范。这些规范可以帮助我们制作出更容易理解的图标，提高应用程序的易用性。以下是几点常见的设计规范：

• 图标颜色不宜过多，最好不要超过3种颜色
• 图标应该在视觉上和其代表的页面内容信息有清晰的连系
• 图标的形状应该是简单的，容易识别的
• 各个图标之间的大小，线宽应该保持一致，以免视觉上出现问题