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告诉父控件，实际开发中一般父控件中控制下方内容的展示 ...}

2.tab页的添加，这里我们得益于vue数据循环的方式，我们只需要将需要添加的tab加入到数组即可tabs: ['精选', '话题', '关注']//这里为了简便，直接采用了字符串的方式，可以根据实际场景，传入对象等滑块滑动的距离，因为我们已经添加了动画的持续时间，所以我们只需要关注于位移的距离即可。经过分析可得:滑块滑动的距离=当前选中的滑块*每块tab所占宽度+每块子tab所占的宽度的一半-滑块宽度的一半(为了居中)，可能文字有点笼统

imagelet documentWidth = document.body.clientWidth//屏幕宽度let tabLineWidth = $('.line-container').width()//滑块的宽度let tabWidth=documentWidth/tabs.length //tabs为tab数组let moveDistance = index * tabWidth + tabWidth * 0.5 - tabLineWidth * 0.5 //滑动记录计算,下标index从0开始对了，因为预先并不知道tabs的长度，所以子滑块的宽度是不固定的，这里我们需要在元素挂载完成后设置一下宽度$('.tab-item').width(`${this.documentWidth / this.tabs.length}`);

作者：信心123

链接：https://www.jianshu.com/p/daedc674ac09