uniapp小程序实现自定义tabbar

最新推荐文章于 2025-03-28 15:59:16 发布

baibai_b

最新推荐文章于 2025-03-28 15:59:16 发布

阅读量813

点赞数 8

文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/baibai_b/article/details/135750588

版权

本文介绍了如何在Vue项目中创建一个可自定义的底部导航栏组件，通过JavaScript处理点击事件，实现与原生TabBar的切换。组件代码展示了如何设置不同页面的图标、选中状态和文本，以及如何在其他页面中引入和使用该组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先在项目公共组件中创建文件

组件代码

<template>
    <view class="tab_bar">
        <view class="tabbarBox">

            <view class="handleBox" v-for="(item, index) in tabBarList" :key="index" @click="goPages(item.pagePath, index)">
                <view class="menuBox">
                    <image class="img" :src="selectIndex === index ? item.selectedIconPath : item.iconPath"></image>
                    <text class="menuBoxText" :class="index === selectIndex ? 'TextColor' : 'Text'">{{ item.text }}</text>
                </view>
            </view>
        </view>
    </view>
</template>
  
<script lang="ts" setup>
import { ref } from 'vue';
const props = defineProps({
    selectIndex: {
        type: Number,

    }
})
// iconPath 没选择图标
// selectedIconPath 选中时的图标
const tabBarList = [
    {
        pagePath: "/pages/home/index",
        iconPath: "/static/icon_main_tab_home.png",
        selectedIconPath: "/static/icon_main_tab_home_selected.png",
        text: "首页"
    }, {
        pagePath: "/pages/activity/index",
        iconPath: "/static/icon_main_tab_benefit.png",
        selectedIconPath: "/static/icon_main_tab_benefit_selected.png",
        text: "福利"
    },
    {
        pagePath: "/pages/card/index",
        iconPath: "/static/icon_main_tab_mid.png",
        selectedIconPath: "/static/icon_main_tab_mid.png",
        text: "抽卡机"
    },
    {
        pagePath: "/pages/cabinet/index",
        iconPath: "/static/icon_main_tab_cabinet.png",
        selectedIconPath: "/static/icon_main_tab_cabinet_selected.png",
        text: "盒柜"
    },
    {
        pagePath: "/pages/profile/index",
        iconPath: "/static/icon_main_tab_profile.png",
        selectedIconPath: "/static/icon_main_tab_profile_selected.png",
        text: "我的"
    }

];

const goPages = (pagePath: string, index: number) => {
    if (index !== props.selectIndex) {
        uni.switchTab({
            url: pagePath
        });
    }
}
</script>
  
<style lang="scss" scoped>
.tab_bar {
    width: 100vw;
    bottom: 0;
    position: fixed;
    background-color: #fff;
       // 自动计算底部安全距离
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

    .tabbarBox {
        padding: 18rpx 16rpx 0;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;

        .handleBox {
            flex: 1;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;

            .menuBox {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;

                .img {
                    width: 66rpx;
                    height: 66rpx;
                }
            }
        }
    }

    .tabbarBoxImg {
        width: 100%;
        height: 62rpx;
        position: absolute;
        top: -52rpx;
        left: 0;
    }
}

.Text {
    font-size: 20rpx;
    text-align: center;
    color: #9da5b3;
    font-weight: 600;
    letter-spacing: 6rpx;
    padding-left: 6rpx;
    box-sizing: border-box;
}

.TextColor {
    @extend .Text;
    color: #000;
}


.tabbarBox {
    :nth-child(3) .menuBoxText {
        color: #000000 !important;
        font-size: 26rpx;

    }

    :nth-child(3) .img {
        width: 140rpx !important;
        height: 140rpx !important;
        margin-top: -78rpx;
    }
}
</style>

在需要用的组件中直接引入使用并传入下标