自制简单的Tabs（Vue）

老样子先上效果图

image

实现思路

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

界面上

1. 文字选中与未选中的状态
2. 下方滑块的动画效果

逻辑上

1. 文字选中样式的替换
2. tab页的添加
3. 滑块滑动的距离

具体实现步骤

界面部分

1. 文字选中与未选中状态的样式，这里我们可以通过动态添加class来实现
2. 动画效果我们用css3的transfrom属性即可完成
   核心代码如下

<div class="tab-item"     
:class="{checked_tab:checkTab===index}"//vue类绑定的方式     
@click="clickTab(tab,index)"//点击事件     
:key="index"     
v-for="(tab,index) in tabs">{{tab}}</div>

.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: ['精选', '话题', '关注']//这里为了简便，直接采用了字符串的方式，可以根据实际场景，传入对象等

3. 滑块滑动的距离，因为我们已经添加了动画的持续时间，所以我们只需要关注于位移的距离即可。经过分析可得:滑块滑动的距离=当前选中的滑块*每块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}`);

核心代码就这些了，撒花完结，优化什么的，你们自己看着来咯

这是我的github，欢迎大佬们猛戳，不定时更新