更新记录

1.0.4（2025-09-03） 下载此版本

重新修改框架

1.01（2025-09-02） 下载此版本

基本功能实现

1.0.3（2024-09-20） 下载此版本

更新文档

平台兼容性

云端兼容性

uni-app(4.07)

uni-app x(4.07)

xz-tabBar 自定义tabBar

实现隔离底部安全区域和通过插槽自定义凸起的tabBar

Props

Emits

代码示例

常规数据

const list = [
    {
        text: '首页',
        pageKey: 'index',
        pagePath: '/pages/index/index',
        iconPath: '/static/home.png',
        selectedIconPath: '/static/selectedHome.png'
    },
    {
        text: '我的',
        pageKey: 'user',
        pagePath: '/pages/user/index',
        iconPath: '/static/user.png',
        selectedIconPath: '/static/selectedUser.png'
    }
];

const openPage = (url) => {
    uni.switchTab({
        url
    });
};

普通样式

<template>
    <xz-tabBar :list="list" pageKey="index" selectColor="#1296db" @openPage="openPage"></xz-tabBar>
</template>

凸起样式

<template>
    <xz-tabBar tabBarTopType="shadow" :list="list" pageKey="index" selectColor="#1296db" @openPage="openPage">
        <template #protrusion>
            <view class="protrusion" @click="openPage('/pages/menu/index')">
                <image class="protrusion_img" src="/static/menu.png" mode=""></image>
            </view>
        </template>
    </xz-tabBar>
</template>
<style lang="less" scoped>
.protrusion {
    position: absolute;
    width: 130rpx;
    height: 130rpx;
    border-radius: 50%;
    top: -50rpx;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    .protrusion_img {
        width: 80%;
        height: 80%;
        border-radius: 50%;
    }
}
</style>

自定义样式

const tabBarStyle = {
    height: '100rpx',
    left: '20rpx',
    right: '20rpx',
    bottom: '20rpx',
    borderRadius: '10rpx'
};

<xz-tabBar :list="list" pageKey="user" safeAreaShowType="margin" :tabBarStyle="tabBarStyle" selectColor="#1296db" @openPage="openPage"></xz-tabBar>

注意事项：

1. 使用自定义tabBar会遮住页面底部一个tabBar的高度，需要页面添加下边距或者使用scroll-view组件更好的完成页面效果。
2. 虽然自定义tabBar添加了隐藏系统tabBar，但还是需要在App.vue自行添加uni.hideTabBar()，以提高体验感。
3. 可能会闪屏，如果建议自行解决

官方注意事项：自定义tabBar的性能体验会低于原生tabBar。App和小程序端非必要不要自定义。

• H5端的自定义tabBar组件：H5端不存在原生tabBar性能更高的概念，并且宽屏下常见的tabBar在顶部而不是底部，此时可以使用 custom-tab-bar组件来自定义
• 普通自定义tabBar：使用view自行绘制tabBar。如果页面是多页方式，切换tabBar将无法保持底部tabBar一直显示。所以这种情况建议使用单页方式。单页方式，如果是复杂页面，应用性能会下降明显，需减少页面复杂度。如果是App端，nvue单页的性能会显著高于vue页面
• 微信小程序自定义tabbar：微信提供一直基于webview自定义tabBar的方案。该功能体验不佳，不太推荐使用。
• 原生的tabbar有且只有一个且在首页。二级页如需的tab，需自行编写view来实现。一般二级页面更适合的导航是 segement组件