shuju_ui/test/_components/hBomTab.vue

<template>
    <!--底部tab 切换-->
    <view class="hBomTab w-100 bgc-white   posi-absolute posi-fixed-bottom border-gray-top  flew flew-around">
       <div class="item " v-for="(item,index) in tab_list" :key="index"   :style="{color:color}">
            <div class="name font-size20 flew-column flew  flew-align-center "
                 @tap = "tabChange(index)"
                 :style="{color:index === tab_index ? theme:''}"
            >
                <image class="img"  v-if="index === tab_index && item.value !== '2'" :src="h_global.getImgPath(item.icon[1])">
					
				</image>
                <image class="img"  v-else-if="index !== tab_index && item.value !== '2'" :src="h_global.getImgPath(item.icon[0])"></image>
				 <image class="img2"  v-else :src="h_global.getImgPath(item.icon[0])"></image>

                <div style="font-size: 22rpx;">
                    {{item.name ? item.name : '' }}
                </div>
				
            </div>
			
        </div>
    </view>

</template>

<script>
    export default {
        name: "hBomTab.vue",
        data() {
            return {

                // a:1,
                tab_index: -1,
            }

        },
        props:{
            curr_tab_index:{
                default:1
            },
            theme:{
                default:'#4D4D4D'
            },
            color:{
                default:'#4D4D4D'
            },
            tab_list:{
                default(){
                    return []
                },
                type:Array
            }
        },
        methods: {
            tabChange(index){


                this.tab_index = index; //这种赋值很奇怪 不能直接
                let tab_one = this.tab_list[index];

                this.$emit('tabChange',{index,tab_one})

            }
        },
        mounted(){



            this.tab_index = this.curr_tab_index;
            // console.log( 'curr_tab_index',this.curr_tab_index)
            // console.log( this.tab_list)
        }
    }
</script>

<style scoped lang="scss">
    .item{
        margin: 20upx;
        height: auto;
        color: #4D4D4D;
        flex-grow: 1;
        .img{
            width: 50upx;
            height: 50upx;
        }
		.img2{
			width: 120rpx;
			height: 120rpx;
			position: absolute;
			bottom: 30rpx;
		}
    }

</style>