vue实现一个tab栏(Vue实现tab导航栏并支持左右滑动功能)
类别:编程学习 浏览量:2909
时间:2021-10-22 07:53:39 vue实现一个tab栏
Vue实现tab导航栏并支持左右滑动功能本文主要介绍:利用Vue实现tab导航栏,并且通过flex布局实现左右滑动,计算按钮的位置,当点击第一屏展示的最后一个且还有元素未展示时,自动滑动显示出未显示的元素。
tab导航栏布局:
<section class="theme-list"> <li class="fixed-nav" ref="fixednav"> <li class="fixed-nav-content"> <p v-for="(item, index) in theme" :key="index" :class="['tab-title', activeId === index && 'select-tab']" @click="changeTab(index, $event)" > {{ item }} </p> </li> </li> </section>
theme: ['CSDN博客', '博客园', '高考加油', '中考加油', '小欢喜', '七十周年'], activeId: 0
导航栏样式代码:
.theme-list { margin-top: 12px; } .fixed-nav { overflow-x: scroll; -webkit-overflow-scrolling: touch; } .fixed-nav-content { display: flex; } .tab-title { padding: 0 13px; margin-right: 12px; color: #141414; border-radius: 13px; font-size: 12px; flex-shrink: 0; height: 0.52rem; line-height: 0.52rem; }
此时我们可以实现下面的样式,并且可以左右滑动tab:
需要注意的是,在样式代码中需要添加flex-shrink : 0
,这样才会当tab宽度大于外部容器宽度时不会收缩。
这样,我们基本的tab导航栏已经实现了,现在我们来实现:点击“中考加油”时,整个tab向左滑动,显示出剩下的tab元素。
changeTab(id, event) { // 如果选择的和当前激活的不同 if (id !== this.activeId) { this.activeId = id; // 计算当前按钮的位置,看是否需要移动 const spanLeft = event.clientX; // 当前点击的元素左边距离 const liBox = document.querySelector(".select-tab").clientWidth / 2; // 点击的元素一半宽度 const totalWidths = document.body.clientWidth; // 屏幕总宽度 const widths = totalWidths / 2; // 一半的屏幕宽度 const spanRight = totalWidths - spanLeft; // 元素的右边距离 const scrollBox = document.querySelector(".fixed-nav"); // 获取最外层的元素 const scrollL = scrollBox.scrollLeft; // 滚动条滚动的距离 // 当元素左边距离 或者 右边距离小于100时进行滑动 if (spanRight < 100 || spanLeft < 100) { scrollBox.scrollLeft = scrollL + (spanLeft - widths) + liBox; } } }
通过这个方法可以实现tab的自动滚动了,但是此时还有一个问题是:在滑动的时候会显示出滚动条,显然是不太美观的。
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 0.01rem; opacity: 0; display: none; } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { background-color: #fff; opacity: 0; } /*定义滑块 内阴影+圆角*/ ::-webkit-scrollbar-thumb { width: 0.01rem; border-radius: 0.01rem; opacity: 0; }
这样,一个导航条就实现了,可以在结合公司的业务修改一下导航条的样式就可以啦!
到此这篇关于Vue实现tab导航栏,支持左右滑动的文章就介绍到这了,更多相关Vue左右滑动导航栏内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue验证码怎么用(vue验证码组件使用方法详解)
- vue本地图片切换(vue动态加载本地图片的处理方法)
- vue集成文件上传插件(vue 实现上传组件)
- vuex原理及使用方法(Vuex状态机的快速了解与实例应用)
- vue一个组件两种样式(Vue实现动态样式的多种方法汇总)
- vue 网页打印(vue打印功能实现的两种方法总结)
- vueaxios使用教程交流(Vue使用axios图片上传遇到的问题)
- vue websocket实时刷新数据(Vue+WebSocket页面实时刷新长连接的实现)
- vue引入axios(vue封装axios的几种方法)
- vue3.0带参数的方法(Vue3中ref与toRef的区别浅析)
- vue调用组件内部的方法(Vue如何实现组件间通信)
- vue 组件如何转换虚拟dom(Vue源码分析之虚拟DOM详解)
- vue自定义列组件(vue自定义表格列的实现过程记录)
- vue-cli4开发多页面应用(深入理解Vue-cli4路由配置)
- vue设置div大小(Vue实现div滚轮放大缩小)
- vue应用转flutter(Vue和Flask通信的实现)
- 今日菜价 芥兰涨幅最高 1.33 ,花菜降幅最高 3.10(今日菜价芥兰涨幅最高)
- 今日菜价 椰菜涨幅最高 3.25 ,水空心菜降幅最高 2.58(今日菜价椰菜涨幅最高)
- 今日菜价 红三鱼涨幅最高 4.41 ,黄鳝降幅最高 5.06(红三鱼涨幅最高)
- 今日菜价 西生菜涨幅最高 6.19 ,生菜降幅最高 5.38(西生菜涨幅最高)
- 今日菜价 青豆角涨幅最高 0.70 ,菜心降幅最高 5.55(青豆角涨幅最高)
- 农村植物,龙芽草若长在您家路旁,请珍惜,它对抗癌有特效(龙芽草若长在您家路旁)
热门推荐
- css设计文本框及按钮样式(CSS仿网易首页的头部菜单栏按钮和三角形制作方法)
- docker-compose配置文件(Docker Compose在不同环境的多种安装方式)
- SQL Server将数据导出到SQL脚本文件
- dedecms本地搭建(DEDECMS图文分离存放在另一个服务器实现方法)
- sql server清理日志(SQL Server 2008 清空删除日志文件瞬间缩小日志到几M)
- python学生管理系统的思路(python实现学员管理系统)
- dedecms新字段(DEDECMSv5.6 tags.php标签不能按照时间排序的问题)
- mysql事务级别设置(mysql在项目中怎么选事务隔离级别)
- ASP.NET抓取网页内容
- tomcat的startup闪退的原因(直接双击启动tomcat中的startup.bat闪退原因及解决方法)