vue 左右滑动导航,vue实现侧边栏导航滑动
这篇文章主要为大家详细介绍了某视频剪辑软件实现顶部左右滑动导航，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
日常开发中经常用到导航这些东西，写篇文章记录下。该导航实现为点击末尾/起首位置，导航自动滑动出下一项的效果。
思路：判断当前点击项，相对与屏幕的位置，若点击的位置，满足可移动的限制，进行自动滑动处理。
实现如下：
某视频剪辑软件
模板
div class=调试-索引-页面
div class= tab-layout id= scroller
ul v-for=(tab，idx) in tabList :key=idx
里
:id=`tab-${tab.id} `
class=tab-item
@click=onClickTab(tab)
:style= ` background:$ { tab。“选择，”红色:无 } `
{{ tab.text }}
/李
/ul
/div
/div
/模板
射流研究…
导出默认值{
data() {
返回{
小报列表：[],
}
},
已创建(){
let list=[
我的贵族，
贵族1,
我的贵族2,
贵族3,
贵族4,
贵族5,
我的贵族6,
我的贵族7,
];
list.forEach((text，idx)={
this.tabList.push({
文字，
id: idx，//tab标识
select: idx==0，//是否被选择
索引：idx //处于显示的位置
});
});
},
计算值：{
curTab() {
返回这个。小报记者。find(v=v . select)；
}
},
方法：{
onClickTab(tabInfo) {
让curTab=这个
if (curTab.id==tabInfo.id)返回；
设{ index，id }=tabInfo
//滑动控件
让scroller=document。getelementbyid( scroller )；
设速度=滚动器。滚动宽度/this。小报记者。长度；
让tab=document。getelementbyid(` tab-$ { id } `)；
设bWidth=document。身体。客户端宽度；
//点击右边
如果(curtab。索引索引选项卡。客户端宽度*索引=bWidth-speed){
//滑动的距离
scroller。向左滚动=(索引2)*速度-bWidth；
} else if(curtab。索引索引(标签。客户端宽度*索引-(滚动条。向左滚动bWidth)速度){
//滑动的距离
scroller。向左滚动=(index-1)*速度；
}
curTab.select=false
this.tabList[index].选择=真
}
}
}
较少的。调试-索引-页面{
宽度：100%;
溢出：隐藏；选项卡-布局{
宽度：100%;
溢出-x:滚动；
显示器：flex。选项卡-项目{
宽度：1雷姆；
文本对齐：居中；
}
}
}
以上就是导航的显示了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。