uniapp自定义tabbar

App.vue中隐藏系统tabbar

<script>
    export default {
        onShow: function() {
            //隐藏官方tabbar
            uni.hideTabBar()
        }
    }
</script>

创建tabbar组件

<template>
    <view class="tabbar">
        <view class="tab" v-for="(item,index) in tabbarList" :key="index" @click="changeTab(item.pagePath)">
            <image v-if="item.pagePath === currentPage" :src="item.selectedIconPath" mode=""></image>
            <image v-else :src="item.iconPath" mode=""></image>
            <view class="text">
                {{item.text}}
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            currentPage: {
                type: String,
                default: 'index'
            }
        },
        data() {
            return {
                tabbarList: [{
                    "pagePath": "index",
                    "iconPath": "/static/tabbar/home.png",
                    "selectedIconPath": "/static/tabbar/home_s.png",
                    "text": "首页"
                }, {
                    "pagePath": "category",
                    "iconPath": "/static/tabbar/category.png",
                    "selectedIconPath": "/static/tabbar/category_s.png",
                    "text": "分类"
                }, {
                    "pagePath": "shopcar",
                    "iconPath": "/static/tabbar/shopcar.png",
                    "selectedIconPath": "/static/tabbar/shopcar_s.png",
                    "text": "购物车"
                }, {
                    "pagePath": "my",
                    "iconPath": "/static/tabbar/my.png",
                    "selectedIconPath": "/static/tabbar/my_s.png",
                    "text": "我的"
                }]
            }
        },
        methods: {
            changeTab(pagePath) {
                if (pagePath === 'shopcar' || pagePath === 'my') {
                } else {
                    uni.switchTab({
                        url:`../../pages/${pagePath}/${pagePath}`
                    })
                }
            }
        }
    }
</script>

<style scoped>
    .tabbar {
        z-index: 999;
        background-color: white;
        border-top: 2rpx solid #636263;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 120rpx;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .tab {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    image {
        width: 60rpx;
        height: 60rpx;
    }
</style>

页面引用tabbar组件

<Tabbar currentPage='my'></Tabbar>

import Tabbar from "@/components/common/Tabbar.vue"
components:{
            Tabbar
        },