uni-app 自定义tab-bar

前言

uni-app官方的tabBar修改字体大小和图片大小不生效，并且有闪烁的问题。自定义tab-bar可以解决这些问题

---

一、自定义tab-bar.vue

<template>
	<view class="uni-tabbar">
		<view class="uni-tabbar__item" v-for="(item,index) in tabbar" :key="index" @tap="changeTab(item)">
			<uni-icons custom-prefix="iconfont" :type="item.fontIcon"  :color="item.pagePath == pagePath?'#C80808':'#979797'"></uni-icons>
			<view class="uni-tabbar__label" :class="{'active': item.pagePath == pagePath}">
				{{item.text}}
			</view>
		</view>
	</view>
</template>

<script>
    export default {
        props: {
            pagePath: null
        },
        data() {
            return {
                page: 'contact',
                showPage: false,
                containerHeight: 400,
                tabbar: [
                    {
                    	"pagePath": "/pages/index/index",
						"fontIcon": "icon-home",
                    	"text": "首页"
                    },
                    {
                    	"pagePath": "/pages/order/list",
						"fontIcon": "icon-order",
                    	"text": "订单"
                    },
                    {
                    	"pagePath": "/pages/product/index",
						"fontIcon": "icon-product",
                    	"text": "产品"
                    },

                    {
                    	"pagePath": "/pages/personal/index",
						"fontIcon": "icon-center",
                    	"text": "我的"
                    }
                ]
            };
        },
        mounted() {
            
        },
        methods: {
            changeTab(item) {
                this.page = item.pagePath;
                uni.switchTab({
                    url: this.page
                });
				uni.hideTabBar({
				    animation: false
				})
            },
        }
    }
</script>

<style lang="scss" scoped>
    .uni-tabbar {
        position: fixed;
        bottom: 0;
        //z-index: 900;
        width: 100%;
        display: flex;
        justify-content: space-around;
        //height: 98upx;
        padding: 14px 0;
        box-sizing: border-box;
        border-top: solid 1upx #ccc;
        background-color: #fff;
        box-shadow: 0px 0px 17upx 1upx rgba(206, 206, 206, 0.32);
        .uni-tabbar__item {
            display: block;
            font-size: 12px;
            text-align: center;
			.uni-active {
				
			}
        }
        .uni-tabbar__label {
            font-size: 12px;
            color: #979797;
            &.active {
                color: #C80808;
            }
        }
		.uni-active {
			color: #C80808;
		}
    }
</style>

二、main.js 全局引入tab-bar.vue

import tabBar from '@/components/tab-bar.vue'

Vue.component('tabBar', tabBar)

三、pages.json 添加tabBar配置

"tabBar": {
		"selectedColor":"#79D5AD",
		"color": "#999999",
		"backgroundColor":"#ffffff",
		"borderStyle": "white",
		"list": [{
		    "pagePath":"pages/index/index",
		    "text": " "
		},{
		    "pagePath":"pages/order/list",
		    "text": " "
		},{
		    "pagePath":"pages/product/index",
		    "text": " "
		},{
		    "pagePath":"pages/personal/index",
		    "text": " "
		}]
	}

三、其他需要显示tabBar的页面引入第一步中的tab-bar组件

<tabBar :pagePath="'/pages/index/index'"></tabBar>

隐藏默认的tar-bar

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