流程图与代码：一个Tabs组件的封装过程

需求描述

最近在做这样一个需求：在商品列表之上加一个分类，点击分类可以切换商品。

交互分析

商品列表已经有了，需要做的只是上面的分类的tab，我画了一下整个页面的交互图：

tap和pullDown的时候都会重新请求数据，并且重新渲染，过程中涉及骨架图和loading的显示隐藏。

已有的组件

我看了下已有的基础组件，发现有一个能部分满足我的需求，但是又有一些需要修改的地方：样式有很多不同，tab过多时不支持滚动显示，而且它封装了Tab和Swiper两部分。

如图，tap和swipe事件有对应的swipeHandler和tapHanlder，处理流程都是先切换activeIndex，然后计算indicator的动画相关的样式（width、translateX），最后dispatch一个事件到父组件，把activeIndex传递出去。需要的参数是tabs、activeIndex、通过named slot传进来的内容，以及activeIndexChange的event handler。

Tabs组件的封装

考虑到在那个组件基础上修改可能会影响到其他的模块，且改动还是比较大的。于是我又封装了一个组件，只封装了tab的部分。

添加动画

做完之后，设计过来看了一下，她说分类下面的小横条要加一个动画。于是我又在之前的基础上改。

这个动画就是点击某一个分类的时候，横条会滚动到对应的tab下。也就是translateX和width会变化，width变是因为分类名的长度不一样。小程序里不能直接拿到dom元素，所以width的计算有些麻烦。我开始是直接通过fontsize乘以文字数量来算的，后来想到有英文字符这种方式算的结果就不对了，于是改用canvas的measureText来测量，后来发现比较麻烦。这时才想到有getBoundingClientRect这个api可以直接获取到，没必要自己算。
动画使用了小程序提供的animation的api，类似css的@keyframes。

做完之后，我想着要不要给下面的内容也加上swipe的切换效果。做的过程中发现swipe的高度没法自适应，得需要自己来计算然后设置。代码改动量比较大，考虑到这个不是产品提的需求，所以决定暂时先不做了。

总结

要在已有的列表之上添加一个分类的tab，看了下已有的组件，不是很合适，需要做比较多的改动，为了避免引起其他bug，我又封装了一个Tabs组件，只把tab的部分封装了进去。之后设计说要加一个动画，分析后这段逻辑应该加在tapHanlder里切换activeIndex的之后，去修改横条的样式。但是因为横条的宽度是变化的，计算过程还是比较曲折，经历了fontsize*数量来计算，canvas的measureText最后才想到有getBoundingClientRect可用。动画的实现是基于小程序的animation api以及view组件对animation的支持。做完之后想着要不要也把下面部分的swipe切换做了，遇到高度不能自适应、对已有代码改动量大的问题，考虑到这不是产品提的需求，以及工期的原因，决定先不去研究了。

从页面的分析到基础组件的分析再到之后自己封装组件思路的梳理，流程图的作用很大，梳理清了思路之后，对于后续添加动画也很容易。于是我觉得代码和流程图应该相互补充。流程图用来分析和理清思路，代码是具体的实现和细节。