theme: condensed-night-purple

需求：

tabs的position为fixed，增加tabs的间距，并且在点击的tabs前面添加特殊标识。效果如下

思路：

最简单的是动态添加伪元素，根据当前点击的index来给item添加伪元素，但是uview组件好像不可以这么操作。

再看一下它提供的API

该组件封装的时候并未提供直接插入icon的API，可能觉得是多余吧。

那就换个思路，我给它添加节点不就OK了吗，原生js提供了insertBefore，类似于appendChild，W3C解释为“向列表中插入一个项目”。需要一个指定的父节点、一个要被添加的节点（本文中的icon）、一个指定的子节点。写法如下所示：

document.getElementById("myList").insertBefore(newItem,existingItem);

OK，上面的就可以在H5页面完成添加子节点了。并且亲测有效。

到这里我心情很高兴，问题解决了，但是APP模拟器和uniapp告诉我，我知道你很高兴，但是你先别高兴。

uniapp提供了自己获取节点的方法，也就是说document.querySelect(）等在uniapp中是无用的。

你以为改一下获取方式就可以了吗，不。Uniapp不可以操作DOM，你只是能获取到而已。

我真是高兴的太早了。

换个思路，

使用自定义插槽，修改插槽，然后根据active来移动？好像不行，position显然是脱离文档流的

继续换，

我把这背景图换成icon加滑块怎么样？试了下不行。

再换，

把这个换成icon，但是它好像是只提供isDot:true设定

难受，好像组件里面不可以改了，我去找找tabs插件吧，我去Dcloud里面找了一圈，好像也没用提供这样的，是不是都觉得这个设计多余啊，但是既然产品给了，咱就得努力去实现它不是。

最后我准备自己写一个组件了~~~~~，当然，这不是最后解决方案！

解决方法

想来想去，发现徽标还是可利用的。

1 先给u-tabs动态绑定个class样式

2 遍历接口tab栏数据的时候给它设置isDot为true，给所有的item都添加上徽标

3 v-deep找到元素的class,给所有的徽标都添加bg-img、以及color、size等。（记得tab的序号要和对应的item序号对应。）

4 最后记得给徽标和item来个reverse。