方法一.切换选项卡时,内容改变,内容的样式不同。
定义索引:默认选中选项一
切换选项卡的索引方法
这是效果
方法二.切换选项卡时,内容改变,内容的样式相同。
定义导航栏选项和索引,默认第一个
切换索引
这是效果
最后附上代码:
<template>
<view class="new-file">
<!-- 第一种方法 -->
<!-- 头部选项卡 -->
<view class="head-nav">
<view :class="navIndex==1?'activite':''" @click="checkIndex(1)">选项一</view>
<view :class="navIndex==2?'activite':''" @click="checkIndex(2)">选项二</view>
</view>
<!-- 内容切换 -->
<view class="content" v-if="navIndex==1">
我是选项一
</view>
<view class="content" v-if="navIndex==2">
我是选项二
</view>
<!-- 第二种方法 -->
<view class="head-nav">
<!-- 头部选项卡 -->
<view :class="listIndex==y?'activite':''" @click="checkListIndex(y)" v-for="(x,y) in navList" :key="y">{{x}}</view>
</view>
<!-- 内容 -->
<view class="content" v-for="(x,y) in navList" :key="y">
<view class="" v-if="listIndex==y">
<view class="box">盒子</view>
</view>
</view>
</view>
</template>
<script>
export default{
data(){
return{
navIndex:1,
navList:["选项卡一","选项卡二"],
listIndex:0
}
},
methods:{
checkIndex(index){
this.navIndex =index;
},
checkListIndex(index){
this.listIndex=index;
}
}
}
</script>
<style scoped>
.head-nav{
width: 50%;
margin:20rpx auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.activite{
font-weight: bold;
border-bottom: 6rpx solid #0065d9;
}
.head-nav>view{
padding-bottom: 10rpx;
}
.box{background: #008000;}
</style>