tab动画 vue_自制简单的Tabs（Vue）

老样子先上效果图

image

实现思路

我们依旧从界面与逻辑两方面下手

界面上文字选中与未选中的状态

下方滑块的动画效果

逻辑上文字选中样式的替换

tab页的添加

滑块滑动的距离

具体实现步骤

界面部分文字选中与未选中状态的样式，这里我们可以通过动态添加class来实现

动画效果我们用css3的transfrom属性即可完成

核心代码如下

@click="clickTab(tab,index)"//点击事件

:key="index"     v-for="(tab,index) in tabs">{ {tab}}

.line-container {

background: $themeColor;//scss变量用法    height: 0.1rem;

width: 5%;

transition-duration: 200ms;//动画持续时间}

逻辑部分

1.文字选中样式的替换，上文中已经进行了事件绑定，只需在方法中进行标量替换即可clickTab(tab, index) {

this.checkTab = index;//标量替换

this.$emit('changeTab', tab);//将目前选中的tab告诉