uniapp-封装底部导航栏tabbar(第一种方案)

<template>
    <view>

        <index v-if="currentPage == 0"  />
        <elegant v-if="currentPage == 1" />
        <classroom v-if="currentPage == 2" />
        <my v-if="currentPage == 3" />
        
        
        
        <view class="tabbar" :style="{'padding-bottom': paddingBottomHeight + 'px'}">
            <!-- <view class="tabbar"> -->
            <view class="tabbar-item" v-for="(item,index) in list2" :key="index" @click="tabbarChange(index)">
                <image class="item-img" :src="item.icon_a" v-if="currentPage == index"></image>
                <image class="item-img" :src="item.icon" v-else></image>
                <view class="item-name" :class="{'tabbarActive': currentPage == index}" v-if="item.text">{
  {item.text}}</view>
            </view>
        </view>
        
    </view>
</template>

<script>
    import index from "@/6-Jingshanprimaryschool/pages/index/index.vue"
    import classroom from "@/6-J