uniapp开发tab底部切换组件

<template>
    <view class="footerNav">
        <div class="footerNavitem" @click="getactive(0)">
            <div class="footerNavitemtop">
                <image v-if="active==0" src="../../static/footer/icon_faxian_active.png" mode=""></image>
                <image v-else src="../../static/footer/icon_faxian.png" mode=""></image>
            </div>
            <div class="footerNavitemp">发现</div>
        </div>
        <div class="footerNavitem" @click="getactive(1)">
            <div class="footerNavitemtop">
                <image v-if="active==1" src="../../static/footer/icon_fenlei_active.png" mode=""></image>
                <image v-else src="../../static/footer/icon_fenlei.png" mode=""></image>
            </div>
            <div class="footerNavitemp">分类</div>
        </div>
        <div class="footerNavitem2" @click="getactive(0)">
            <image class="icon_fb" src="../../static/footer/icon_fb.png" mode="widthFix"></image>
        </div>
        <div class="footerNavitem" @click="getactive(2)">
            <div class="footerNavitemtop">
                <image v-if="active==2" src="../../static/footer/icon_message_hover.png" mode=""></image>
                <image v-else src="../../static/footer/icon_message.png" mode=""></image>
            </div>
            <div class="footerNavitemp">消息</div>
        </div>
        <div class="footerNavitem" @click="getactive(3)">
            <div class="footerNavitemtop">
                <image v-if="active==3" src="../../static/footer/icon_my_active.png" mode=""></image>
                <image v-else src="../../static/footer/icon_my.png" mode=""></image>
            </div>
            <div class="footerNavitemp">我的</div>
        </div>
    </view>
</template>

<script>
    export default {
        data() {
            return {}
        },
        onShow() {

        },
        props: {
            active: {
                type: Number,
                default () {
                    return 0;
                }
            }
        },
        methods: {
            getactive(e) {
                this.$emit('getactive', e)
            },
        }
    }
</script>

<style lang="scss" scoped>
    .footerNav {
        width: 750rpx;
        // height: 130rpx;
        padding-top: 30rpx;
        background: #FFFFFF;
        border: 1rpx solid #E7E7E7;
        position: fixed;
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);

        .footerNavitem {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: nowrap;
            flex-direction: column;

            .footerNavitemtop {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-wrap: nowrap;
                flex-direction: row;

                image {
                    width: 44rpx;
                    height: 44rpx;
                }
            }

            .footerNavitemp {
                font-size: 22rpx;
                font-family: MicrosoftYaHei;
                font-weight: 400;
                color: #000000;
            }
        }

    }

    .footerNavitem2 {
        flex: 1.4;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;

        .icon_fb {
            width: 96rpx;
        }
    }
</style>