自制简单的Tabs（Vue）
老样子先上效果图
实现思路
我们依旧从界面与逻辑两方面下手
界面上
- 文字选中与未选中的状态
- 下方滑块的动画效果
逻辑上
- 文字选中样式的替换
- tab页的添加
- 滑块滑动的距离
具体实现步骤
界面部分
- 文字选中与未选中状态的样式，这里我们可以通过动态添加class来实现
- 动画效果我们用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: ['精选', '话题', '关注']//这里为了简便，直接采用了字符串的方式，可以根据实际场景，传入对象等
- 滑块滑动的距离，因为我们已经添加了动画的持续时间，所以我们只需要关注于位移的距离即可。经过分析可得:滑块滑动的距离=当前选中的滑块*每块tab所占宽度+每块子tab所占的宽度的一半-滑块宽度的一半（为了居中），可能文字有点笼统
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}`);
