Vue自制简单的Tabs核心代码

自制简单的Tabs（Vue）

老样子先上效果图

实现思路

我们依旧从界面与逻辑两方面下手文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/4709.html

界面上文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/4709.html

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

逻辑上文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/4709.html

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

具体实现步骤

界面部分文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/4709.html

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.文字选中样式的替换，上文中已经进行了事件绑定，只需在方法中进行标量替换即可文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/4709.html

 clickTab(tab, index) {
 this.checkTab = index;//标量替换
 this.$emit('changeTab', tab);//将目前选中的tab告诉父控件，实际开发中一般父控件中控制下方内容的展示
 ...
复制代码

2.tab页的添加，这里我们得益于vue数据循环的方式，我们只需要将需要添加的tab加入到数组即可文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/4709.html

tabs: ['精选', '话题', '关注']//这里为了简便，直接采用了字符串的方式，可以根据实际场景，传入对象等
复制代码

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

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