1.效果
2.主要代码详解
主要代码如下:active是下划线,activeitem是选中后改变字体颜色, 'item-' + (index + 1),用item来区分获取当前文字对应的距离和宽度好计算下划线的位置
{ { item.label || "" }}
选中后设置的样式,active是一个块级元素
.active {
position: absolute;
left: 0;
bottom: 0;
width: 50px;
height: 2px;
background: #409eff;
border-radius: 50px;
transition: left 0.3s ease;
}
.activeitem {
color: #409eff;
}
3.完整代码
项目
{ { item.label || "" }}