uni-app 选项卡 二

image.png

<template>
    <view>
        <view class="inv-h-w" >
            <block v-for="(item,index) in items" :key="index">
                <view :class="['inv-h',Inv== index?'inv-h-se':'']" @click="Inv=index">{{item}}</view>
            </block>
            <!--<view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="Inv=1">我是选项卡二</view>-->
        </view>
        <view class="" v-show="Inv == 0">
            我是选项卡一
        </view>
        <view class="" v-show="Inv == 1">
            我是选项卡二
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                Inv:0,
                items: ['商家邀请码', '商家申请列表']
            }
        },
        methods: {
            changeTab(Inv){
                that.navIdx = Inv;

            },
        }
    }
</script>

<style>
    .inv-h-w{background-color: #FFFFFF;height: 100upx;display: flex;}
    .inv-h{font-size: 32upx;flex: 1;text-align: center;color: #666666;height: 100upx;line-height: 100upx;position: relative;
    }
    .inv-h-se{
        font-size: 36rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #4DB046;
    }
    .inv-h-se:after {
        content: '';
        position: absolute;
        bottom: -2rpx;
        top: auto;
        left: 42%;
        height: 6rpx;
        width: 44rpx;
        background-color: #4DB046;
    }

    page{background-color: #F2F2F2;}
</style>