(1) 自定义底部tabbar组件

<template>
    <view class="tabbar-container">
        <view class="tabbar-border"></view>
        <view class="tabbar-item" v-for="(item,index) in tabList" :key="index" @click="selectTab(index,item)">
            <view class="item-bd">
                <view class="item-icon">
                    <image style="width: 100%;height: 100%;" :src="getImage(index,item)"></image>
                </view>
                <view class="item-label" :class="{blue:(tabIndex==index)}">{{item.text}}</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name:"TabBar",
    props:{
        
    },
    data() {
        return {
            tabIndex:0,
            tabList: [{
                    pagePath: "/pages/tabBar/home/home",
                    iconPath: "/static/images/tabbar/icon_nav_index.png",
                    selectedIconPath: "/static/images/tabbar/icon_nav_index_on.png",
                    text: "首页"
                },
                {
                    pagePath: "/pages/tabBar/machine/machine",
                    iconPath: "/static/images/tabbar/icon_nav_machine.png",
                    selectedIconPath: "/static/images/tabbar/icon_nav_machine_on.png",
                    text: "机器"
                },
                {
                    pagePath: "/pages/tabBar/statistics/statistics",
                    iconPath: "/static/images/tabbar/icon_nav_statistic.png",
                    selectedIconPath: "/static/images/tabbar/icon_nav_statistic_on.png",
                    text: "统计"
                },
                {
                    pagePath: "/pages/tabBar/user/user",
                    iconPath: "/static/images/tabbar/icon_nav_my.png",
                    selectedIconPath: "/static/images/tabbar/icon_nav_my_on.png",
                    text: "我的"
                }
            ]
        };
    },
    methods:{
        selectTab(index,item){
            this.tabIndex = index;
            uni.switchTab({
                url:item.pagePath
            });
        },
        getImage(index,item){
            if(this.tabIndex == index){
                return item.selectedIconPath
            }else{
                return item.iconPath
            }
        }
    }
}
</script>

<style scoped>
.tabbar-container{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    z-index: 998;
    background-color: rgb(248,248,248);
    display: flex;
}
.tabbar-border{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    transform: scaleY(.5);
    background-color: rgba(0, 0, 0, 0.33);
}
.tabbar-item{
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    align-items: center;
}
.item-bd{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 50px;
}
.item-icon {
    position: relative;
    text-align: center;
    display: inline-block;
    margin-top: 5px;
    width: 24px;
    height: 24px;
}
.item-label {
    position: relative;
    text-align: center;
    font-size: 10px;
    line-height: 1.8;
    color: rgb(122, 126, 131);
    font-size: 10px;
}
.blue{
    color: #00a9e2;
}
</style>

(2) 全局注册：main.js

import TabBar from './components/tabBar.vue'
Vue.component('TabBar', TabBar)

(3) vue页面直接调用

<TabBar></TabBar>

(4) 效果展示

tabbar.png