uniapp自定义底部TabBar并使用uni.switchTab的完整教程

uniapp自定义底部TabBar并使用uni.switchTab的完整教程

引用

CSDN

1.

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

在uniapp开发中，自定义底部TabBar是一个常见的需求。本文将详细介绍如何在保持uni.switchTab功能的同时，实现自定义TabBar的开发。

1. 隐藏系统TabBar

首先需要在pages.json文件中配置系统TabBar的高度为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>
<style lang="scss" scoped>
    @import './index.scss';
</style>  

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;
            }
            
        }
    }  

3. 注册全局组件

在main.js或main.ts文件中，将创建好的TabBar组件注册为全局组件。

4. 使用自定义TabBar

在需要显示TabBar的页面中引入组件，并根据当前页面路径设置currentPath参数。

最终效果如下：