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 相关文章推荐
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
Vue如何实现变量表达式选择器
Feb 18 Vue.js
关于vue中如何监听数组变化
Apr 28 Vue.js
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
Vue2.0搭建脚手架
Mar 13 Vue.js
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
vue生命周期钩子函数以及触发时机
Apr 26 Vue.js
Vue Element plus使用方法梳理
Dec 24 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生成略缩图代码
2012/07/16 PHP
从零开始学YII2框架(二)通过 Composer 安装扩展插件
2014/08/20 PHP
php中Redis的应用--消息传递
2017/03/28 PHP
用javascript来实现动画导航效果的代码
2007/12/16 Javascript
jqgrid 简单学习笔记
2011/05/03 Javascript
一行代码告别document.getElementById
2012/06/01 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
2013/10/24 Javascript
关于Javascript作用域链的八点总结
2013/12/06 Javascript
jQuery简单实现网页选项卡特效
2014/11/24 Javascript
使用jQuery获得内容以及内容的属性
2015/02/26 Javascript
JavaScript开发者必备的10个Sublime Text插件
2016/02/27 Javascript
AngularJS入门教程之表格实例详解
2016/07/27 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
2016/09/04 Javascript
Vue概念及常见命令介绍(1)
2016/12/08 Javascript
微信小程序商城项目之商品属性分类(4)
2017/04/17 Javascript
JavaScript之RegExp_动力节点Java学院整理
2017/06/29 Javascript
vue移动端UI框架实现QQ侧边菜单组件
2018/03/09 Javascript
Javascript原型链及instanceof原理详解
2020/05/25 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
2020/08/10 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
python创建关联数组(字典)的方法
2015/05/04 Python
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
python 提取文件指定列的方法示例
2019/08/07 Python
Python 解析pymysql模块操作数据库的方法
2020/02/18 Python
python numpy库np.percentile用法说明
2020/06/08 Python
丝芙兰巴西官方商城:SEPHORA巴西
2016/10/31 全球购物
意大利体育用品和运动服网上商店:Maxi Sport
2019/09/14 全球购物
沙特阿拉伯家用电器和电子产品购物网站:Sheta and Saif
2020/04/03 全球购物
必须要使用游标的SQL语句有那些
2012/05/07 面试题
2014年专项整治工作总结
2014/11/17 职场文书
实习单位证明范例
2014/11/17 职场文书
2014年工人工作总结
2014/11/25 职场文书
专家推荐信怎么写
2015/03/25 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书
MySQL InnoDB ReplicaSet(副本集)简单介绍
2021/04/24 MySQL