一、组件来由

1. 需求

最近这段时间应开发组长和产品经理要求，写了接连写了好几个H5的活动页。事后，发现这几个活动都有几处相似地方：那就是都有一个导航Tab栏。点击某个tab，发送请求，在不同内容中切换。当时因为项目上线时间匆忙，只有一天，产品和开发组长的要求tab能够滑动就行了，不需要什么动画之类的，所以做的很简单：包裹容器下包裹若干个子容器，让它们横向排列，然后父容器隐藏横向滚动条就结束了，用户只能左右滑动，然后点击某个tab，点击的tab背景高亮就行了。

2. 问题

这个tab栏能够正常使用，但是存在的一个问题：如果用户点击了某个tab项，该tab项高亮，然后他又滑动了整个tab栏，此时高亮的tab就不知道是哪一个了，如下图：虽然发现了问题，但是由于时间紧，任务重，没有解决该问题。一次周例会中，产品提出来这个问题，希望用户点击tab始终是能滚到正中间的位置。

二、组件编写

1.思路

先不用多说，附上代码的原地址：github.com/Mryuelaiyue… 里面ScrollTab组件就是了，另外里面的Swipe和Popup组件大家也可以看看，这两个我之后文章会介绍这里面最核心的问题就是：如何计算当前点击的tab项目中间位置距离，思考一段时间后：此时终于有了结果，附上代码块和图片

  this.$refs.tabItemWrap[i].offsetLeft + // 激活包裹子tab的offsetLeft
        this.tabItemWrapWidth / 2 -      // 包裹子tab项的宽度/2
        this.tabWidth / 2 -              // tab栏的宽度 
        this.$refs.tab.offsetLeft -      // tab栏的offsetLeft
        this.wrapPaddingRight / 2        // 包裹子tab的容器内右边距/2

目的位置 = 点击tab的offsetLeft+包裹子tab项的宽度/2-tab栏的offsetLeft-tab栏宽度/2-包裹子tab的容器内右边距/2 以上有两个注意点，那就是包裹子tab项的宽度和tab栏的宽度都得是精确值，需要用到getBoundingClientRect().width得到精确值，这个接下来一切都简单了：只需让当前的tab栏滚到这个位置就可以了，为了看起来更舒服，我引入了animate动画库，效果如下图：🎉🎉🎉

Aug-03-2021 19-58-36.gif 初来乍到，有啥问题欢迎各位大佬批评指正，转载请注明出处

vue组件之路 - 自带滚动居中的Tab组件

一、组件来由

1. 需求

2. 问题

二、组件编写

1.思路