Vue实现tab导航栏，支持左右滑动

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

tab导航栏布局：

<section class="theme-list"><div class="fixed-nav" ref="fixednav"><div class="fixed-nav-content"><pv-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：

需要注意的是，在样式代码中需要添加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制作导航栏html,vue实现nav导航栏的方法
vue实现nav导航栏的方法 2019-01-07 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了vue实现nav导航栏的方法,编程之家小编觉得挺不错的,现在分 ...
微信小程序实现自定义顶部导航栏（选项卡），固定导航栏和可滑动导航栏
微信小程序实现自定义顶部导航栏(选项卡),固定导航栏和可滑动导航栏固定导航栏可滑动导航栏顶部导航栏的需求实现: 顶部导航栏由列表渲染,通过tabclick点击事件改变activeIndex变量的 ...
纯CSS导航栏下划线滑动效果
纯CSS导航栏下划线滑动效果问题描述面向 C 端的产品嘛,总有一些动效想要提高用户体验,以下是用纯 css 实现导航栏选中下划线滑动效果解决方案以下是实现效果: 主要代码如下: <tem ...
Tab导航栏切换的实现
文章目录前言一.自定义属性 1.自定义属性的目的 2.自定义属性的操作 3.规范二.导航栏的实现 1.静态样式 2.JS实现交互总结前言 Tab导航栏切换在网页场景中十分常见,本文将介绍如何 ...
vue+elementui左侧导航栏
vue+elementui左侧导航栏踩坑最近接触前端vue+elementui,记录一下 1. element官网这里:default-active="***"前面没有冒号,直接 ...
vue制作导航栏html,Vue如何实现导航栏菜单的方法
Vue如何实现导航栏菜单的方法发布时间:2020-08-20 09:42:45 来源:亿速云阅读:235 作者:小新这篇文章将为大家详细讲解有关Vue如何实现导航栏菜单的方法,小编觉得挺实用的, ...
Vue实现侧边导航栏于Tab页关联
技术栈侧边栏用 Antd tab使用element 效果 <template><div class="main-card"><el-row>& ...
vue中点击导航栏部分，页面切换
写页面的时候都会用到一些导航栏.点击不同的部分切换不同的页面.并且点击的时候更换颜色代码自己简单的写一下:(vue) <nav> <ul><li v-for=" ...
css订单导航栏横线动画,小程序纯css 实现tab导航栏下划线跟随动画
很多时候在做tab导航的点击时我们都会要上一个过渡的动画,不然的话会显得生硬,用户没有达到比较佳的用户体验.如下图: 在开发者工具中预览效果 t3fyo-a07nj.gif 我们可以用两种方法实现这样 ...
原生JS实现点击导航栏鼠标左右滑动（适用于PC端和移动端）
效果图: 点击导航栏左右拖动代码: CSS: <style>.navBar {width: 1200px;margin-left: 25px;margin-top: 40px;margi ...

Vue实现tab导航栏，支持左右滑动

Vue实现tab导航栏，支持左右滑动相关推荐

最新文章

热门文章