效果图
tab切换下划线效果
<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>
