<template>
<view class="tab-box">
<view class="tab-item" @click="testTabClick(index)" :class="tabIndex == index?'active':''" v-for="(item,index) in tabList" :key="index">
{{item.name}}
</view>
</view>
</template>
<script>
export default{
data() {
return {
tabIndex:0,
tabList:[{
name:"电器"
},{
name:"衣服"
},{
name:"百货"
},{
name:"电脑"
}]
}
},
methods: {
testTabClick(index) {
console.log(index)
this.tabIndex = index
}
}
}
</script>
<style lang="scss" scoped>
.tab-box{
display: flex;
.tab-item{
flex-shrink: 0;
padding: 24rpx;
position: relative;
transition: all 0.2s linear;
&::after{
transition: all 0.2s linear;
transform: translateX(-50%) scaleX(0);
content: '';
width: 50%;
position: absolute;
left: 50%;
bottom: 20rpx;
border-bottom: 6rpx solid red;
border-radius: 4rpx;
}
&.active{
&::after{
content: '';
width: 50%;
position: absolute;
left: 50%;
transform: translateX(-50%) scaleX(1);
bottom: 20rpx;
border-bottom: 6rpx solid red;
}
}
}
}
</style>
02-21
352
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
08-14
9846
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
04-01
1万+
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)