一、原理很简单,就是点击切换内容。直接上代码
html
js
css
效果图:
代码如下:
<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 :class="navIndex==3?'activite':''" @click="checkIndex(3)">便民服务</view>
</view>
<!-- 内容切换 -->
<view class="content" v-if="navIndex==1">
我是选项一
</view>
<view class="content" v-if="navIndex==2">
我是选项二
</view>
<view class="content" v-if="navIndex==3">
我是选项三
</view>
<script>
export default{
data(){
return{
navIndex:1,
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>
觉得好的话可以点个赞再走哦,自己写的,可能有些问题,欢迎大家改正。