vue——tab菜单项滑动切换
效果图:
一开始的做法是将这个高亮绿色的部分作为选中项的左边框处理,但这样做切换时的视觉效果不好,现在修改以后更加美观。
实现方法:将这个宽3px 高41px的小
div
设为绝对定位,动态改变它的位置,即top
值
具体代码:
- 将侧边栏分为两个部分:滑块(左侧) + 菜单项(右侧),
并为滑块动态绑定style
- 将滑块设置为绝对定位
position: absolute
,初始位置在最上方top: 0; left: 0
,transition
设置过渡动画 - 当点击任一菜单项时,改变滑块的位置