原生js实现带左右箭头可滑动的tab效果

效果如下：

由于分辨率的问题，在起始位置的的左箭头和末尾位置的右箭头禁用状态没有录上，其实是有的。

布局分析

总的来说，将用三个盒子来实现效果：
可视区域为黄色框①，包含可视tab蓝色框②以及左右箭头红色框；
绿色框③就是所有的tab了，②和③的关系就是卡槽和卡带的关系。

内容设计

我项目引用的是ant design vue库，所以整个都是基于库内的组件进行讲解的，但是其他库也是相似的，如有问题请留言反馈

方便控制左右按钮的禁用状态设置，我采用button组件的图标按钮

<div class="menu-tab"><a-buttonv-if="show"  //实际应用中若是tab较少则没有显示箭头的必要(会在mounted中进行判断)icon="left"type="link"ghost:disabled="disabled1"style="width: 20px;height: 20px;position: absolute;top: 38%;left: 0;"@click="toPrev"/><div class="activemenu"><div class="active-menu-animated"><span:key="index"v-for="(item, index) in menuData"@click="menuClick(index)":class="index == activeKey1 ? 'active-span' : ''"  //控制选中tab的活性状态>tab{{ index + 1 }}</span></div></div><a-buttonv-if="show"icon="right"type="link"ghost:disabled="disabled2"style="width: 20px;height: 20px;position: absolute;top: 38%;right: 0;"@click="toNext"/>
</div>

处理方案

1、data

设置一些默认值

show: false,
disabled1: true,
disabled2: false,

2、mounted

控制菜单tab左右箭头的显隐

  mounted() {//蓝盒子2的内容区域宽度let e1 = document.getElementsByClassName("activemenu")[0].clientWidth;//绿盒子3的内容区域宽度let e2 = document.getElementsByClassName("active-menu-animated")[0].clientWidth;if (e1 < e2) {this.show = true;}},

3、methods

左箭头

    toPrev() {this.disabled2 = false;//右箭头禁用解开let ele = document.getElementsByClassName("active-menu-animated")[0];//由于获取到的left是带有单位的，不能直接运算，所以要想办法得到数值再组合单位进行赋值//使用三目运算符的目的是最开始的时候得到元素的left是undefined，可是不能直接进行运算的哟ele.style.left = ele.style.left.split("p")[0]? Number(ele.style.left.split("p")[0]) + 300 + "px": "300px";//判断平移位置，左箭头禁用if (ele.style.left.split("p")[0] == 0) {this.disabled1 = true;}},

右箭头

    toNext() {this.disabled1 = false;//左箭头禁用解开let ele = document.getElementsByClassName("active-menu-animated")[0];//解释同上ele.style.left = ele.style.left.split("p")[0]? ele.style.left.split("p")[0] - 300 + "px": "-300px";//判断平移位置，右箭头禁用if (Math.abs(ele.style.left.split("p")[0]) + 300 > ele.clientWidth) {this.disabled2 = true;}},

样式设置

1、menu-tab

.menu-tab{padding: 0 20px;position: relative;font-size: 20px;color: #fff;overflow: hidden;
}

2、activemenu

  .activemenu {padding: 0 20px;overflow: hidden;white-space: nowrap;span {padding: 0 20px;cursor: pointer;}span:hover,.active-span {color: #ffffff;padding-bottom: 24px;border-bottom: 3px solid #fff;font-weight: bold;}}

3、active-menu-animated

  .active-menu-animated {position: relative;display: inline-block;box-sizing: border-box;margin: 0;padding-left: 0;list-style: none;transition: left 0.3s ease-in-out;}

整体效果

1、较少tab

2、多个tab

原生js实现带左右箭头可滑动的tab效果相关推荐

css的滑动门效果,JS+CSS实现简易实用的滑动门菜单效果
本文实例讲述了JS+CSS实现简易实用的滑动门菜单效果.分享给大家供大家参考.具体如下: 这是一个简洁实用的CSS+JavaScript滑动门导航菜单,写时候,我尽量用最少的代码写出兼容性好的代码,希 ...
js检测鼠标是否在操作_原生JS趣味demo：炫酷头像鼠标追随效果的实现
我们常在一些网页中可以看到鼠标追随效果一个简单的图片.动画甚至一小段文字都可以作为鼠标跟随的载体之前咱们的直播课中老师也讲过相关的canvas追随粒子特效今天就让我们一起来用原生js ...
原生JS写仿淘宝搜索框（代码+效果），可实现3级搜索哦！
闲来无事,用原生JS写了一个淘宝搜索框,用的淘宝的接口,可直接进行商品搜索. 写在前面: 1.记得引用jquery啊! 2.有人私信我说css样式不能用,那是因为复制代码的时候,有空格,只需要自己把c ...
原生JS快速实现拖放（drag and drop）效果
拖放是很常见的一种交互效果,很多时候我们都会借助于第三方的控件来实现,其实用原生js实现起来也非常的方便.接下来我们就用原生js和css快速实现这样的拖放效果: HTML HTML的内容很简单,就是五 ...
原生js的图片.文字.小框的跑马灯效果及弹幕效果
笔者在最近的一个点上项目中使用原生js遇到一个跑马灯效果,需要图片循环播放,可以根据图片的多少改变一定的样式,从而实现跑马灯效果.于是把图片的,文字的和另一种小框的都整合了一下,顺便基于小框的跑马灯增 ...
html鼠标滚动图片渐渐淡出,原生js和jquery实现图片轮播淡入淡出效果
图片轮播有很多种方式,这里采用其中的淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成js使用,其实也就是用js原生模拟出这些用法. 但不管 ...
原生js实现轮播图-滑入滑出效果
滑入滑出轮播图 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
原生js实现轮播图实例教程
原生js实现轮播图实例教程本实例效果如下图所示: 根据实例效果,需要的元素有图片.中间圆点按钮.左右箭头按钮等.实际html代码如下所示: <div class="banner_co ...
原生JS实现韩雪冬轮播图
分享一个用原生JS实现的韩雪冬轮播图,效果如下: 实现代码如下: <!DOCTYPE html> <html><head lang="en">& ...