H5 导航tab组件切换

子组件

<template>
    <div :style="{height: nvheight+(stsHeight-0)+'px',background:boxbg}">
        <div class="nav-status" :style="{height:stsHeight+'px',background:statusbg}"></div>
        <div class="nav-title" :style="{height: nvheight+'px',top: stsHeight + 'px',background:background}">
            <img v-if="leftIcon" :src="leftIcon" slot="left" style="height: 28px;width: 28px;" @click="onLeftButtonClick">

            <div class="tab"  @click="setCurrentTab('ordinaryCar')"
                :class="{ 'active': currentTab === 'ordinaryCar' }" :style="currentTab === 'ordinaryCar' ? currentTabStyle : changeTabStyle">
                普通车辆
                <div v-if="currentTab === 'ordinaryCar'" :class="{ 'underlineOne': componentType === 'firsrsubmit', 'underline': componentType !== 'firsrsubmit' }"></div>
                <div v-if="currentTab === 'taxiCar'" class="underline underlineComment"></div>
            </div>

            <div class="tab" @click="setCurrentTab('taxiCar')"
                :class="{ 'active': currentTab === 'taxiCar' }"  :style="currentTab === 'taxiCar' ? currentTabStyle : changeTabStyle">
                打车车辆
                <div v-if="currentTab === 'taxiCar'" :class="{ 'underlineOne': componentType === 'firsrsubmit', 'underline': componentType !== 'firsrsubmit' }"></div>
                <div v-if="currentTab === 'ordinaryCar'" class="underline underlineComment"></div>
            </div>

            <div slot="right" :style="{fontFamily: 'wxcIconFont', fontSize: '14px', color: rightIconColor}"
                @click="onRightButtonClick">
                <slot name="right">{{'    ' + rightIcon}}</slot>
            </div>
        </div>
        <div class="placeholderBox" :style="{height: nvheight+(stsHeight-0)+'px',background:placeholderBg}"></div>
    </div>
</template>

<script>
    // import * as Config from '../../config/Config'
import {navigatorbBarHeight} from '../../config/Config'
export default {
    data: ()=>({
        nvheight: navigatorbBarHeight,
        currentTab: 'ordinaryCar',
        activeTabStyle: {
            fontWeight: '700',
            color: '#212121'
        },
        normalTabStyle: {
            fontWeight: '500',
            color: '#717171'
        },
        activeTabStyleFirst: {
            fontWeight: '700',
            color: '#fff'
        },
        normalTabStyleFirst: {
            fontWeight: '500',
            color: '#fff'
        },
    }),
    props: {
        onLeftButtonClick: {type: Function, default:function(){}},
        onRightButtonClick: {type: Function, default:function(){}},
        boxbg: {type: String, default: ""},
        placeholderBg: {type: String, default: ""},
        statusbg: {type: String, default: "#fff"},
        background: {type: String, default: "#fff"},
        title: {type: String, default: '  '},
        rightIcon: {type: String, default: ""},
        rightIconColor:{type: String, default: "#212121"},
        leftIcon: {type: String, default: 'https://h5.yivizd.com/h5Project/image/nav-back.png'},
        stsHeight: {type: Number, default: 0},
        componentType: {type: String, default: ''},
        info:{type: String, default: ''},
    },
    created(){
        // const activeTab = this.$route.query.activeTab;
        // if (activeTab === 'taxiCar') {
        //     this.currentTab = 'taxiCar';
        // }
    },
    watch:{
        info: {
            handler(newVal, oldVal) {
                if(newVal == 'changeActiveName'){
                    this.currentTab = 'ordinaryCar';
                }
            },
            deep: true, //深度监听
            immediate: true 
        }
    },
    computed: {
        currentTabStyle() {
            if (this.componentType === 'firsrsubmit') { 
                return this.activeTabStyleFirst;
            } else {
                return this.activeTabStyle; 
            }
        },
        changeTabStyle() {
            if (this.componentType === 'firsrsubmit') { 
                return this.normalTabStyleFirst;
            } else {
                return this.normalTabStyle; 
            }
        }
    },
    methods:{
        setCurrentTab(tab) {
            console.log('组件的tab',tab);
            // 通知父组件标签页切换事件
            if(this.componentType === 'firsrsubmit'){
                this.$toast({text:'请先完成认证'})
            }else{
                this.currentTab = tab;
                this.$emit('tabChanged', tab);
            }
        },
    }
}
</script>

<style lang="less" scoped>
    .nav-status{
        position: fixed;
        top: 0;
        left: 0;
        z-index: 900;
        width: 100%;
    }
    .nav-title {
        display: flex;
        position: fixed;
        left: 0;
        z-index: 900;
        width: 100%;
        box-sizing: border-box;
        justify-content: space-between;
        align-items: center;
        padding: 0 15px;
        .title{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .tab{
            display: inline-block; 
            cursor: pointer;
            // position: relative;
            display: flex;
            font-size: 17px;
            flex-direction: column;
            align-items: center;
        }
        .underline {
            width: 28px;
            height: 4px;
            background: linear-gradient(270deg, #1ABAFF 0%, #2180FF 100%);
            border-radius: 2px;
            margin-top: 4px;
            transition: all 0.3s ease; 
        }
        .underlineOne {
            width: 28px;
            height: 4px;
            background: #fff;
            border-radius: 2px;
            margin-top: 4px;
            transition: all 0.3s ease; 
        }
        .underlineComment {
            background: transparent;
        }
    }
    .placeholderBox{
        position: fixed;
        top: 0;
        left: 0;
        z-index: 800;
        width: 100%;
    }
</style>

父组件

<template>
    <div class="page">
        <navigation-bar v-if="!$store.state.isMini" :stsHeight="$store.state.statusHeight"
            :onLeftButtonClick="function () { exitCommit() }" :rightIcon="' '"
            @tabChanged="handleTabChange" :info="info"></navigation-bar>
        <div class="bigBox" v-if="loadingStatus === '0' && activeName == 'ordinaryCar'">      </div>
        <div class="taxiBox" v-if="activeName == 'taxiCar'"></div>
    </div>
</template>
import NavigationBar from './widget/NavigatorBarNew'
export default {
    components: {
        NavigationBar
    },
    data() {
        return {
            activeName: 'ordinaryCar', 
            info:'',//用于监听导航子组件tab切换
        }
     },
    methods: {
        // 切换tag
        handleTabChange(activeName) {
            console.log('home页面选择的tab', activeName);
            if (activeName == 'taxiCar' &&
                !(this.realNameInfo.realNameStatus === 1 &&
                    this.driverInfo.driverPaperStatus === 1 &&
                    this.carInfo.some(car => car.state === 1))
            ) {
                this.taxiOwner = true; // 弹出弹窗
                if(this.taxiOwner){
                    this.info = 'changeActiveName'
                }
            }else{
                this.activeName = activeName
            }
        },  
        closeTaxiDialog(){
            this.taxiOwner = false
            this.info = ''
        },  
    }

就可以实现导航切换了