uniapp-自定义凸出的tabbar

tabbar.vue

<template>
    <view class="TabBar">
        <view class="tab" v-for="(item,index) in TabBarList" :key="index" @tap="navigatorTo(item.url)">
            <!-- 判断是否有点击，如果没有就不是激活样式，点击就是激活的样式 -->
            <image class="imgsize" v-if="item.type == 0" :src="current == index ? item.selectIcon : item.icon" mode="widthFix"></image>
            <!-- 设置一个状态值（type），判断加号是否展示 -->
            <image class="addimgsize" v-if="item.type == 1" src="../../static/add.png" mode="widthFix"></image>
            <view class="text">{{item.name}}</view>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            current: {
                type: Number,
                default: 0 // 默认第一个页面 tabbar 激活
            }
        },
        data() {
            return {
                TabBarList: [{
                        type: 0,
                        icon: '../../static/home.png',
                        selectIcon: '../../static/home-active.png',
                        name: '首页',
                        url: '../index/index'
                    },
                    {
                        type: 0,
                        icon: '../../static/bagtab.png',
                        selectIcon: '../../static/bagtab-active.png',
                        name: '供需',
                        url: '../demand/demand'
                    },
                    {
                        type: 1,
                        icon: '../../static/add.png',
                        selectIcon: '../../static/add.png',
                        name: '发布供需',
                        url: '../edit/edit'
                    },
                    {
                        type: 0,
                        icon: '../../static/company.png',
                        selectIcon: '../../static/company-active.png',
                        name: '企业',
                        url: '../company/company'
                    },
                    {
                        type: 0,
                        icon: '../../static/person.png',
                        selectIcon: '../../static/person-active.png',
                        name: '我的',
                        url: '../personal/personal'
                    },
                ]
            }
        },
        methods: {navigatorTo(e) {
                uni.redirectTo({url: e,});
            }
        }
    }
</script>

<style scoped>
.TabBar {
    position: fixed;
    bottom: 0;
    height: 80upx;
    background-color: #fff;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.tab {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.imgsize {
    width: 40upx;
    height: 40upx;
}
.addimgsize {
    width: 70upx;
    height: 70upx;
    margin-top: -30upx;
}
.text {font-size: 12px;}
</style>

需要使用到 tabbar 的组件里，给 tabbar 组件传值，设置点击时的激活样式

<template>
    <view>
        第二个页面
        <tabbar :current="1"></tabbar>
    </view>
</template>

<script>
    import tabbar from '../component/tabbar.vue'
    export default {data() {return {}
        },
        components: {tabbar},
        methods: {}}
</script>

<style>

</style>