Vue实现tab导航栏并支持左右滑动功能


Posted in Vue.js onJune 28, 2021

本文主要介绍:利用Vue实现tab导航栏,并且通过flex布局实现左右滑动,计算按钮的位置,当点击第一屏展示的最后一个且还有元素未展示时,自动滑动显示出未显示的元素。

tab导航栏布局:

<section class="theme-list">
  <div class="fixed-nav" ref="fixednav">
    <div 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>
    </div>
  </div>
</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:

Vue实现tab导航栏并支持左右滑动功能

需要注意的是,在样式代码中需要添加flex-shrink : 0,这样才会当tab宽度大于外部容器宽度时不会收缩。

这样,我们基本的tab导航栏已经实现了,现在我们来实现:点击“中考加油”时,整个tab向左滑动,显示出剩下的tab元素。

changeTab(id, event) {
  // 如果选择的和当前激活的不同
  if (id !== this.activeId) {
    this.activeId = id;
    // 计算当前按钮的位置,看是否需要移动
    const spanLeft = event.clientX; // 当前点击的元素左边距离
    const divBox = 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) + divBox;
    }
  }
}

通过这个方法可以实现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.js 相关文章推荐
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
vue使用节流函数的踩坑实例指南
May 20 Vue.js
Vue实现动态查询规则生成组件
May 27 Vue.js
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
Vue的生命周期一起来看看
Feb 24 Vue.js
浅谈Vue的computed计算属性
Mar 21 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
vue ant design 封装弹窗表单的使用
Jun 01 Vue.js
vue @ ~ 相对路径 路径别名设置方式
Jun 05 Vue.js
Vue3.0写自定义指令的简单步骤记录
vue.js Router中嵌套路由的实用示例
Jun 27 #Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
vue-router中hash模式与history模式的区别
Vue-Element-Admin集成自己的接口实现登录跳转
Vue + iView实现Excel上传功能的完整代码
Vue vee-validate插件的简单使用
Jun 22 #Vue.js
You might like
zf框架的registry(注册表)使用示例
2014/03/13 PHP
PHP命名空间(namespace)的动态访问及使用技巧
2014/08/18 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
PHP设计模式之工厂方法设计模式实例分析
2018/04/25 PHP
Laravel 实现数据软删除功能
2019/08/21 PHP
JavaScript中的面向对象介绍
2012/06/30 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
2015/03/26 Javascript
javascript实现的右下角弹窗实例
2015/04/24 Javascript
jQuery实现鼠标滑过点击事件音效试听
2015/08/31 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
2016/07/08 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
微信小程序 Button 组件详解及简单实例
2017/01/10 Javascript
js+html5实现复制文字按钮
2017/07/15 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
关于layui 弹出层一闪而过就消失的解决方法
2019/09/09 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
python创建和删除目录的方法
2015/04/29 Python
使用python检测主机存活端口及检查存活主机
2015/10/12 Python
python数字图像处理实现直方图与均衡化
2018/05/04 Python
通过Pandas读取大文件的实例
2018/06/07 Python
python2.7使用plotly绘制本地散点图和折线图
2019/04/02 Python
python向企业微信发送文字和图片消息的示例
2020/09/28 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
美味咖啡的顶级烘焙师:Cafe Britt
2018/03/15 全球购物
乐观大学生的自我评价
2014/01/10 职场文书
安全生产活动月方案
2014/03/09 职场文书
2014年清明节寄语
2014/04/03 职场文书
博士毕业生自我鉴定范文
2014/04/13 职场文书
销售目标责任书
2014/07/23 职场文书
帮一个朋友写的求职信
2014/08/09 职场文书
2015年教研工作总结
2015/05/23 职场文书
法定授权委托证明书
2015/06/18 职场文书
vue引入Excel表格插件的方法
2021/04/28 Vue.js
centos8安装MongoDB的详细过程
2021/10/24 MongoDB