前言
最近写uniapp，ui里面有一个导航栏切换的逻辑，因为要跟UI保持一致，对于组件库很难实现高度定制，所以这里就自己手写实现一个点击切换的导航栏。先看下图效果：
主要实现的是通过点击切换导航栏，并且样式有一个切换的效果，大家可以根据自己的需求进行样式的DIY
html部分
我这里只给了关键代码，每一个tab使用了动态绑定class，里面的短横线是tab_itembot写的样式
<view class="tab_contant">
<view class="tab">
<view :class="active1" @click="chenked(1)">
<view class="tab_itemtitle">入职档案</view>
<view class="tab_itembot"></view>
</view>
<view :class="active2" @click="chenked(2)">
<view class="tab_itemtitle">晋升档案</view>
<view class="tab_itembot"></view>
</view>
<view :class="active3" @click="chenked(3)">
<view class="tab_itemtitle">荣誉档案</view>
<view class="tab_itembot"></view>
</view>
</view>
</view>
js部分点击切换
可以看到上面动态绑定class，我这里用的是计算属性，并且每个tab都绑定了点击事件用来判断谁高亮：
计算属性：如果当前被选中高亮，则class就是active。没被选中则class就是active1
<script>
export default {
data() {
return {
isActive: 1
};
},
computed: {
active1() {
return this.isActive==1?'active':'active1'
},
active2() {
return this.isActive==2?'active':'active1'
},
active3() {
return this.isActive==3?'active':'active1'
}
},
methods: {
chenked(type) {
this.isActive = type
}
}
}
}
</script>
CSS部分
然后需要编写的就是active和active1两个class的样式编写，前者为被选中的样式，后者是未被选中的样式
.tab_contant {
position: absolute;
width: 750rpx;
height: 634px;
left: 0px;
top: 602rpx;
background: #FFFFFF;
border-radius: 28rpx 28rpx 0px 0px;
display: flex;
flex-direction: column;
align-items: center;
.tab {
width: 480rpx;
height: 100rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 26px;
// 选中的样式
.active {
width: 64px;
height:50px ;
display: flex;
flex-direction: column;
align-items: center;
.tab_itemtitle {
font-family: 'PingFang SC';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 155%;
/* identical to box height, or 25px */
text-align: center;
color: #000000;
}
.tab_itembot {
width: 36px;
height: 0px;
/* 五分钟蓝 */
margin-top:5px;
border: 2px solid #1F6AB5;
border-radius: 50px;
}
}
// 未选中的样式
.active1{
width: 64px;
height:50px ;
display: flex;
flex-direction: column;
align-items: center;
.tab_itemtitle {
font-family: 'PingFang SC';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 155%;
/* identical to box height, or 19px */
text-align: center;
color: #000000;
opacity: 0.6;
}
.tab_itembot {
width: 15.02px;
height: 0px;
margin-top: 10px;
border: 2px solid #B9B9B9;
border-radius: 50px;
}
}
}
}
v-if判断
然后下面的内容只需要通过v-if判断isActive的值就行了，就是控制下面内容的显示。我这第二第三个页面是单独写的组件
<view v-if="isActive==1">入职档案</view>
<myHonorFile v-if="isActive==2"></myHonorFile>
<myPromotionFile v-if="isActive==3"></myPromotionFile>
这样就完成了效果的实现，大家可以根据自己的需求修改对应的样式