image
实现思路我们依旧从界面与逻辑两方面下手
界面上
文字选中与未选中的状态
下方滑块的动画效果
逻辑上
文字选中样式的替换
tab页的添加
滑块滑动的距离
界面部分
文字选中与未选中状态的样式，这里我们可以通过动态添加class来实现
动画效果我们用css3的transfrom属性即可完成
核心代码如下
{{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所占的宽度的一半-滑块宽度的一半（为了居中），可能文字有点笼统
image
let 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
