tabbar怎么些_一步一步使用Vue写一个简单的顶部Tabbar

最近用Hybird写一些简单的需求。其中有一个要用到顶部选项卡的控件。在github上并没有找到合适的，要么过于复杂，要么样式不合适。于是决定自己写一个简单的顶部选项卡。这篇文章是分享做这个tabbar的过程以及其中遇到的一些问题。

使用到的知识点

vue 的组件，绑定，事件传递，css的动态绑定

先来看我们要做成的原页面(原生iOS做的)：

屏幕快照 2019-08-11 下午3.04.28.png

要做的组件就是顶部的tabbar这一块。

分析

其实就是要放n个tab view布满整个宽度，然后底部要一个滑动条可以动画滚动。

关键问题点：

tabs数组是作为属性传递过来的，如果按照百分比来定义宽度，如何动态地把css中的宽度跟传递的data做绑定？

点击tabbar后，如何让底部的滑动条滚动到合适的位置?

步骤

由于对vue和css还不是特别熟悉，这里采取分步的方式一点一点达到最终的效果。

将整个tabbar作为一个view而不是一个组件。先做好整个view再抽取一个单独的组件出来。 这样做相对于一开始就把它当做一个组件来说，少了引用与传值的部分，对于初学不久的人来说最好是控制变量，保证问题集中在自己关注的地方。

写死数据，先固定宽度25%写死,先把整体的界面先完成。完成简单的数据绑定，避开第一个难点。

此时的代码

v-for="(item