基礎:
1.v-show顯示隱藏
2.click點擊事件
3.三目運算
步驟說明:
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>
效果如圖: