1.先写一个外框，再写2个内容，先把选项卡固定在顶部使用display: flex;，随后写2个不同的样式去区分选中和未选择。
2.三目运算分别给他们赋一个排序，点击的时候获取是第一个还是第二个，如果选中则添加inv-h-se样式。
3.return中默认显示第一个。
4.最后写2个不同的容器，使用v-show来切换。
<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){ that.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>
这样就实现了一个简单的选项卡功能，样式的话可以根据自己需要来进行更改。
