uniapp实现tab选项卡功能demo

<template>

<view>

<view class="inv-h-w">

<view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="Inv=0">选项卡1</view>

<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

}

},

methods: {

changeTab(Inv) {

this.navIdx = Inv;

}

}

}

</script>

<style>

.inv-h-w {

background-color: #FFFFFF;

height: 100upx;

display: flex;

}

.inv-h {

font-size: 30upx;

flex: 1;

text-align: center;

color: #C9C9C9;

height: 100upx;

line-height: 100upx;

}

.inv-h-se {

color: #5BA7FF;

border-bottom: 4upx solid #5BA7FF;

}

page {

background-color: #F2F2F2;

}

</style>