本文已参与「新人创作礼」活动，一起开启掘金创作之路。
1、 场景
最近项目在写小程序，考虑到性能使用纯原生写微信小程序。有个场景就是排行榜需要根据不同类型进行筛选展示，如图：
主要不太好写的点在于tab的个数是不定的，可能一个，可能两个，也可能六七个，所以需要可以左右滑动；另外就是每一个tab的字数也是不定的，可能两个字，可能五六个字。
2、 具体实现
- 遇到的问题 tab可能存在多个，则需要使用小程序的 scroll-view 视图容器，而考虑到左右可滑动，兼容性更好，一般会使用flex布局。
那么这里就有一个问题了，如果每个tab的字数是相同的或者相差不大，可以直接给一个固定宽度，整体的页面交付是没有问题的。
而我遇到的就是每个tab的宽度是不定的，可能是两个字，可能是六个字，宽度不定，css写出来的效果就不太友好。
比如：字体显示不全，相邻tab之间间距有差距，点击的时候（active）样式会被覆盖等等...
- 思路 存在上面问题的原因主要是在于没法确定每个tab的宽度导致。
那么换个思路，既然用到了flex布局，而且需要设置一个宽度，那么咱们可以把整个tab的宽度给算出来。
怎么算呢？
这里想到的方法是根据字数的多少来算，即每个tab的字数总和 * 单个字体的宽度（这里可以根据字体大小估算，然后再加减调试）
- 上代码
wxml代码
这里的 flexWidth 就是动态算出来的宽度
wxss代码
js代码
itemTypes、flexWidth等参数都需在 data 里面申明一下
33 是根据字体大小来的，48 是css中设置的margin
最后
代码如果有什么疑问，欢迎留言谈论交流哟！
