效果圖

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>

總結(jié)

以上是生活随笔為你收集整理的css实现tab切换时下划线动画效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。