UniApp自定义底部TabBar并使用uni.switchTab功能

创作时间:

作者:

@小白创作中心

UniApp自定义底部TabBar并使用uni.switchTab功能

引用

CSDN

https://blog.csdn.net/m0_65629667/article/details/139021324

在UniApp开发中，自定义底部TabBar是一个常见的需求。本文将详细介绍如何在UniApp中实现自定义TabBar，并确保能够使用uni.switchTab功能进行页面切换。

1. 隐藏原生TabBar

首先需要在pages.json文件中配置原生TabBar的height属性为0，使其不再显示。同时，需要将自定义TabBar所需的页面添加到配置中。

2. 创建自定义TabBar组件

建议在项目中创建一个components文件夹，专门存放自定义组件。然后在该文件夹下新建一个TabBar文件，可以选择使用scss、less或css进行样式编写。

index.vue 文件代码

<template>
    <view style="height: 180rpx;">
        <view class="content" :style="{zIndex}">
            <view class="tabber_box">
                <view v-for="(item,index) in tabBars" :key="index"
                    :style="{width:`${ratio}%`,display:'flex',justifyContent:'space-around',margin: '24rpx 0'}">
                    <view class="tabber_item" @click="onNav(item.pagePath)">
                        <image v-if="currentPath === item.pagePath" :src="item.iconPath"></image>
                        <image v-else :src="item.selectedIconPath"></image>
                        <text
                            :style="{color:currentPath === item.pagePath ? item.selectedColor : item.color}">{{item.name}}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        props: {
            currentPath: { // 当前页面路径
                type: String,
                default: '/pages/index/index',
            },
            zIndex: { // 界面层级
                type: Number,
                default: 10
            }
        },
        data() {
            const color = '#FFFFFF66';
            const selectedColor = '#FFF';
            return {
                tabBars: [{
                        name: '首页',
                        iconPath: '../../static/tabbar/index.png',
                        selectedIconPath: '../../static/tabbar/selectd_index.png',
                        pagePath: '/pages/index/index',
                        color,
                        selectedColor,
                    },
                    {
                        name: '邀请',
                        iconPath: '../../static/tabbar/lnvite.png',
                        selectedIconPath: '../../static/tabbar/selectd_lnvite.png',
                        pagePath: '/pages/lnvite/index',
                        color,
                        selectedColor,
                    },
                    {
                        name: 'VIP',
                        iconPath: '../../static/tabbar/vip.png',
                        selectedIconPath: '../../static/tabbar/selectd_vip.png',
                        pagePath: '/pages/vip/index',
                        color,
                        selectedColor,
                    },
                    {
                        name: '我的',
                        iconPath: '../../static/tabbar/my.png',
                        selectedIconPath: '../../static/tabbar/selectd_my.png',
                        pagePath: '/pages/my/index',
                        color,
                        selectedColor,
                    },
                ],
                ratio: 0,
                isLogin: false,
            }
        },
        mounted() {
            this.ratio = 100 / this.tabBars.length;
        },
        methods: {
            onNav(url) {
                    if (this.currentPath !== url) uni.switchTab({
                        url
                    });
            }
        }
    }
</script>

index.scss 文件代码

.content {
    position: fixed;
    bottom: 0;
    width: 100%;
    .tabber_box {
        display: flex;
        flex-direction: row;
        align-items: center;
        background: #151d33;
        padding-bottom: calc(env(safe-area-inset-bottom) - 48rpx) ; // 适配iphoneX的底部
        padding-bottom: calc(env(safe-area-inset-bottom) - 48rpx); /*兼容 IOS>11.2*/
        
        image {
            width: 56rpx;
            height: 56rpx;
            // margin-bottom: 16rpx;
        }
        .tabber_item {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 28rpx;
        }
        
    }
}