自定义tabBar

第一步：在page.json修改tabbar的配置

只保留页面路径，

Markup

"tabBar": {
	    "color": "#7A7E83",
	    "selectedColor": "#0A50DF",
	    "borderStyle": "white",
	    "backgroundColor": "red",
		"height":"0px",
		"custom": true,
	    "list": [{
	        "pagePath": "pages/home/home"
	        // "iconPath": "static/icon/tab_home_default.png",
	        // "selectedIconPath": "static/icon/tab_home_active.png",
	        // "text": "首页"
	    },
		{
		    "pagePath": "pages/check/check"
		   // "iconPath": "static/icon/tab_check_default.png",
		   // "selectedIconPath": "static/icon/tab_check_active.png",
		   //  "text": "出车前检测"
		},
		{
	        "pagePath": "pages/EmergRescue/EmergRescue"
	       // "iconPath": "static/icon/tab_transport_default.png",
	       // "selectedIconPath": "static/icon/tab__transport_active.png",
	       //  "text": "应急救援"
	    },
		{
	        "pagePath": "pages/drill/drill"
	       // "iconPath": "static/icon/tab_service_default.png",
	       // "selectedIconPath": "static/icon/tab_service_active.png",
	       //  "text": "救援演练"
	    },{
	        "pagePath": "pages/my/my"
	       // "iconPath": "static/icon/tab_my_active.png",
	       // "selectedIconPath": "static/icon/tab_my_default.png",
	       //  "text": "我的"
	    }]

第二部：自定义的tabbar组件全部代码

Markup

<template>
  <cover-view>
    <cover-image src="https://tyb-whp.oss-cn-hangzhou.aliyuncs.com/applet/bcimg.png"></cover-image>
    <cover-view :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
        <cover-view :class="[ index == 2 ? 'tabbar-item2' : `tabbar-item`]"
            v-for="(item, index) in list" 
            :key="index" 
            @click="tabbarChange(item.path)"
        >
            <cover-image :src="item.icon_a" v-if="current == index"></cover-image>
            <cover-image :src="item.icon" v-else></cover-image>
            <cover-view :class="{'tabbarActive': current == index}" v-if="item.text">{{item.text}}</cover-view>
        </cover-view>
    </cover-view>
</cover-view>
</template>
 
<script>
export default {
    props: {
        current: String
    },
    data() {
        return {
            paddingBottomHeight: 0,  //苹果X以上手机底部适配高度
            list: [{
                    text: '首页',  
                    icon: '../../static/icon/tab_home_default.png',  //未选中图标
                    icon_a: '../../static/icon/tab_home_active.png',  //选中图片
                    path: "/pages/home/home",  //页面路径
                },{
                    text: '行业服务',
                    icon: '../../static/icon/tab_service_default.png',
                    icon_a: '../../static/icon/tab_service_active.png',
                    path: '/pages/check/check',
                },
{
                    text: '应急救援',
                    icon: '../../static/icon/check/red-center0.png',
                    icon_a: '../../static/icon/check/red-center0.png',
                    path: "/pages/EmergRescue/EmergRescue",
                },
{
    text: '运输管理',
    icon: '../../static/icon/tab_transport_default.png',
    icon_a: '../../static/icon/tab__transport_active.png',
    path: "/pages/drill/drill",
},{
                    text: '我的',
                    icon: '../../static/icon/tab_my_active.png',
                    icon_a: '../../static/icon/tab_my_default.png',
                    path: "/pages/my/my",
                },
            ]
        };
    },
    created() {
        let that = this;
        uni.getSystemInfo({
            success: function (res) {
                let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
                model.forEach(item => {
                    //适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
                    if(res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
                        that.paddingBottomHeight = 40;
                    }
                })
            }
        });
    },
    watch: {
        
    },
    methods: {
        tabbarChange(path) {
console.log('222');
            uni.switchTab({
                url: path
            })
        }
    }
};
</script>
 
<style scoped>
.extend{
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 750rpx;
height: 200rpx;
 
}
    .tabbarActive{
        color: #0A50DF !important;
    }
    .tabbar{
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 750rpx;
        height: 180rpx;
        .tabbar-item{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100rpx;
margin-top: 90rpx;
            .item-img{
                margin-bottom: 20rpx;
                width: 46rpx;
                height: 46rpx;
            }
            .item-name{
                font-size: 26rpx;
                color: #A3A3A3;
            }
        }
    }
.tabbar-item2{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
margin-top: 40rpx;
margin-left: -10rpx;
    .item-img{
        // margin-bottom: 10rpx;
        width: 115rpx;
        height: 115rpx;
    }
    .item-name{
        font-size: 26rpx;
        color: #A3A3A3;
    }
}
.background{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -999;
width: 750rpx;
height: 150rpx;
}
</style>

第三步：引入

注意：

在引入的页面：

加入这个方法

Markup

onShow() {
		uni.hideTabBar({
			animation: false
		})
	},