vue多tab导航动态左侧菜单,vue点击tab页面滑到相应位置
本文介绍了用Vue实现标签导航栏，用flex布局实现左右滑动效果，并分享了用代码实现标签导航栏布局。本文向您展示了完整的代码。请有需要的朋友参考一下。
本文主要介绍：利用Vue实现标签导航栏，通过flex布局实现左右滑动计算按钮位置。当单击折叠上方显示的最后一个时，仍有未显示的元素，未显示的元素将自动滑动。
选项卡导航栏布局：
section class=主题列表
div class= fixed-nav ref= fixed nav
div class=固定导航内容
p
主题中的v-for=(项目，索引
:key=index
:class=[tab-title ，activeId===index select-tab]
@click=changeTab(index，$event)
{{ item }}
/p
/div
/div
/部分
主题：[CSDN博客，博客花园，高考加油，中考加油，小欢喜， 70周年]，
activeId: 0
导航栏样式代码：主题列表{
边距-顶部：12px
}。固定导航{
溢出-x:滚动；
-WebKit-溢出-滚动：触摸；
}。固定导航内容{
显示器：flex
}。标签-标题{
填充：0 13px
右边距：12px
颜色：# 141414；
边框半径：13px
字体大小：12px
伸缩：0；
身高：0.52雷姆；
行高：0.52雷姆；
}
此时，我们可以实现下面的样式，并且我们可以左右滑动tab:
需要注意的是，您需要在样式代码中添加flex-shrink: 0，这样当选项卡宽度大于外部容器的宽度时，它不会收缩。
这样，我们基本的选项卡导航条就实现了。现在我们来实现一下：当你点击“中考加油”时，整个标签页向左滑动，显示剩余的标签页元素。
changeTab(id，事件){
//如果所选的与当前激活的不同
如果(id！==this.activeId) {
this.activeId=id
//计算当前按钮的位置，看是否需要移动
const spanLeft=event.clientX//当前单击的元素左侧的距离
const div box=document . query selector(。选择-tab键)。client width/2；//所单击元素宽度的一半
const total widths=document . body . client width；//屏幕的总宽度
常数宽度=总宽度/2；//屏幕宽度的一半
const span right=total widths-span left；//元素的右边距离
const scroll box=document . query selector(。固定资产净值’)；//获取最外面的元素
const scroll l=scroll box . scroll left；//滚动条的滚动距离
//当元素的左右距离小于100时滑动
if (spanRight 100 spanLeft 100) {
scroll box . scroll left=scroll(span left-widths)div box；
}
}
}
这种方法可以实现tab的自动滚动，但是这时候又出现了一个问题：滑动的时候会显示滚动条，显然不是很美观。
/*根据滚动条的大小，分别定义滚动条的高度和宽度以及背景的高度和宽度*/
:-WebKit-滚动条{
宽度：0.01毫米；
不透明度：0；
显示：无；
}
/*定义滚动条轨道中的阴影圆角*/
:-WebKit-滚动条-跟踪{
背景色：# fff
不透明度：0；
}
/*定义滑块内部的阴影圆角*/
:-WebKit-滚动条-缩略图{
宽度：0.01毫米；
边框半径：0.01毫米；
不透明度：0；
}
这样就实现了一个导航条。可以结合公司业务修改导航栏的样式！
关于Vue实现tab导航条和支持左右滑动的这篇文章到此为止。关于Vue滑动导航栏的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。