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使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
vue中使用echarts的示例
Jan 03 Vue.js
vuex的使用步骤
Jan 06 Vue.js
vue实现防抖的实例代码
Jan 11 Vue.js
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
vue实现可拖拽的dialog弹框
May 13 Vue.js
vue+spring boot实现校验码功能
May 27 Vue.js
vue+element ui实现锚点定位
Jun 29 Vue.js
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
vue postcss-px2rem 自适应布局
May 15 Vue.js
Vue组件化(ref,props, mixin,.插件)详解
May 15 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
php将数据库导出成excel的方法
2010/05/07 PHP
php中spl_autoload详解
2014/10/17 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
2014/06/03 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
javascript跨域总结之window.name实现的跨域数据传输
2015/11/01 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
Bootstrap基本组件学习笔记之面板(14)
2016/12/08 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
2016/12/14 Javascript
vue.js响应式原理解析与实现
2020/06/22 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
2018/09/28 Javascript
js实现下拉框二级联动
2018/12/04 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
2019/05/10 Javascript
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
VUE实现强制渲染,强制更新
2019/10/29 Javascript
微信小程序自定义弹出层效果
2020/05/26 Javascript
JavaScript通如何过RGraph实现动态仪表盘
2020/10/15 Javascript
详解vue3中组件的非兼容变更
2021/03/03 Vue.js
[02:44]重置世界,颠覆未来——DOTA2 7.23版本震撼上线
2019/12/01 DOTA
Python入门篇之正则表达式
2014/10/20 Python
Python中的对象,方法,类,实例,函数用法分析
2015/01/15 Python
教你用python3根据关键词爬取百度百科的内容
2016/08/18 Python
python 获取当天凌晨零点的时间戳方法
2018/05/22 Python
Python实现动态添加属性和方法操作示例
2018/07/25 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
Python可变参数会自动填充前面的默认同名参数实例
2019/11/18 Python
pycharm 关掉syntax检查操作
2020/06/09 Python
中东地区为妈妈们提供一切的头号购物目的地:Sprii
2018/05/06 全球购物
The North Face北面法国官网:美国著名户外品牌
2019/11/01 全球购物
优秀毕业大学生推荐信
2013/11/13 职场文书
文明学生标兵事迹
2014/01/21 职场文书
甜美蛋糕店创业计划书
2014/01/30 职场文书
干部考核评语
2014/04/29 职场文书
Python手拉手教你爬取贝壳房源数据的实战教程
2021/05/21 Python