vue利用ul,li实现横向滚动的tab页签

效果说明

导航栏页签是动态加减的,如果页签过多,宽度超过导航栏宽度时需要通过左右两个按钮来实现滚动。


1613790190979374.gif

实现原理

  1. ul的css样式设置为不换行(white-space:no-wrap),超出部分隐藏(overflow:hidden)
  2. js找到ul,然后通过scrollTo计算滚动量。

代码







你可能感兴趣的:(vue利用ul,li实现横向滚动的tab页签)