uni-app实现选项卡

效果图：

html

<view class="inv-h-w">
					<view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="Inv=0">门诊服务</view>
					<view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="Inv=1">住院服务</view>
					<view :class="['inv-h',Inv==2?'inv-h-se':'']" @click="Inv=2">便民服务</view>
				</view>
				<view class="" v-show="Inv == 0">
				
				</view>
				<view class="" v-show="Inv == 1">
				
				</view>
				<view class="" v-show="Inv == 2">
				
				</view>

css

.inv-h-w {
		/* background-color: #F2F2F2; */
		height: 100upx;
		display: flex;
		background-color: #FFFFFF;
	}

	.inv-h {
		width: 30rpx;
		font-size: 30upx;
		color: black;
		/* font-weight: 600; */
		flex: 1;
		text-align: center;
		color: black;
		height: 100upx;
		line-height: 100upx;
	}

	.inv-h-se {

		font-weight: 600;
		color: #5BA7FF;
		border-bottom: 6rpx solid #1677FF;
	}

js

export default {
		data() {
			return {
				Inv: 0
			}
		},
methods: {
			// 选项卡
			changeTab(Inv) {
				that.navIdx = Inv;
			},
		}
	}