本次内容比较简单，来介绍选中tab栏底部下划线标识的两种实现方式。
1.通过js来实现，需要js代码来做计算。 由于博主本次的demo用的是小程序，所以标签和html的不一样，大家可以把view理解成一个块级元素，text理解成一个行内元素。在模板文件中，标签元素的下方添加了一个下划线元素。
这个下滑线元素通过position:absolute;脱离了文档流，通过template中的内联样式left来定位这个元素距离父元素左边框的距离，而且可以通过transition属性来对当前元素的left属性变化做一个动画。
在上面提到了通过left属性来控制下划线距离父元素左边框的距离，那么是如何计算的呢？由于客户端的屏幕尺寸不同，我们在做响应式布局的时候，每个tab在不同大小的屏幕上的长度也不同，所以我们在tab选中变化时通过获取到每个.item元素的左边框位置和tab宽度来确定我们下划线左边距离父元素左边框的位置。
2.通过css伪类来实现，代码逻辑比较简单。通过当前选中的tab序号currentIndex为每个tab选择不同的类名，如果没有选中为item，选中为item-selected。
关于伪类的写法，同定义一个新元素的类是比较相似的，唯一不同的是需要定义这个类的content和display。其他都是同定义一个新的元素是一样的，而且利用伪类实现下划线的话，就不能设置transition动画了，因为transition必须针对某一个真实的元素进行设置。
更多精彩文章请关注
