vue里tab菜单横向展示，可分页功能组件实现

这个功能思路跟轮播图差不多，下面实现思路是按照tab宽度移动，具体实现直接上代码

效果图：

子组件：

<template><div class="dataNav"><el-button v-if="move != 0 && !dataLen" size='small' icon="el-icon-arrow-left" @click="navPrev"></el-button> <ul class="dataNavList" ref="dataNavList"><li @click="tabInfo(item)" class="dataNavListItem" v-for="(item, index) in navList" :key="index" :style="{transform:'translateX(-'+move+'px)'}"><span :class="{active: activeName == item}">{{item}}</span></li> </ul><el-button v-if="move != (this.dataNavListRealWidth-this.dataNavListViewWidth + 100) && !dataLen" size='small' icon="el-icon-arrow-right" @click="navNext"></el-button> </div>
</template>
<script>
export default {name:'swiperTab',props:{navList:{type:Array,default:[]}},data () {return {activeName:'', // 选中的tab名move:0,dataNavListRealWidth:0,dataNavListViewWidth:0,dataLen:false};},mounted() {this.activeName = this.navList[0]; // 默认数组第一个选中this.dataNavListRealWidth = this.$refs.dataNavList.scrollWidth; // scrollWidth获取整个菜单实际宽度this.dataNavListViewWidth = this.$refs.dataNavList.offsetWidth; // offsetWidth获取菜单在当前页面可视宽度if(this.dataNavListRealWidth <= this.dataNavListViewWidth){ // tab不多的时候不显示左右两边的操作按钮this.dataLen = true;}// 窗口大小变化时触发。实时更新可视宽度window.onresize = () => {return (() => {this.dataNavListViewWidth = this.$refs.dataNavList.offsetWidth;if(this.move>this.dataNavListViewWidth){this.move=this.dataNavListViewWidth;}})()}},
methods:{//点击触发事件，将当前tab信息传递给父组件tabInfo(item){this.$emit('tabClick',item);this.activeName = item;},// 当菜单项向右的可移动距离大于单个菜单项的宽度时，move减去一个菜单项的宽度（即右移移动一个菜单项的宽度），// 当菜单项向右的可移动距离小于单个菜单项的宽度时，move等于0（即回到最开始没有移动的状态）navPrev(){if(this.move>(100*5)){console.log(this.move)this.move=this.move-(100*5);}else{this.move=0;}},// 当菜单项向左的可移动距离大于单个菜单项的宽度时，move减去一个菜单项的宽度（即左移移动一个菜单项的宽度），// 当菜单项向左的可移动距离小于单个菜单项的宽度时，move等于可以向左移动的最大值（即到最末尾）//实际宽度减去可视宽度就是可移动的范围即move的范围navNext(){if(this.move<this.dataNavListRealWidth-this.dataNavListViewWidth-(100*5)){this.move=this.move+(100*5);}else{this.move=this.dataNavListRealWidth-this.dataNavListViewWidth + 100;}}
}}
</script>
<style lang="scss" scoped>.active{color: #ff813b;}.dataNav {margin-top: 50px;display: flex;height: 70px;.dataNavList {display: flex;padding: 0 10px;overflow: hidden;.dataNavListItem{display: inline-block;/*//每个菜单项的宽度要固定，不然move值无法计算，当然也可以通过其他方法来设置以适应自己的表格*/width: 100px; min-width: 100px;border-radius: 5px;font-size: 15px;text-align: center;color: #7E8690;line-height: 35px;/*// 过渡效果*/transition:transform .2s;}:hover {color: #1D4190;cursor: pointer;}}}
</style>

父组件：

//引入子组件
<swiperTab :navList='navList' @tabInfo='tabInfo'></swiperTab>
<script>
export default {data () {return {navList:[]};},
methods:{//点击触发事件，将当前tab信息传递给父组件tabInfo(item){console.log(item);}}}
</script>

vue里tab菜单横向展示，可分页功能组件实现相关推荐

vue 实现tab切换动态加载不同的组件
vue 实现tab切换动态加载不同的组件使用vue中的is特性来加载不同的组件.具体看如下代码:这个功能对于vue比较复杂的页面可以使用上,可以把一个页面的功能拆分出来,使代码更简单.使用方式具体看 ...
Vue里如何实现excel转json的功能
前言: 因为做微信小程序云开发,在云开发导入数据需要json格式的,然鹅我们市场部的小姐姐给我的文档是excel文件,导致我需要去手动录入,后来在网上搜了下. 有通过复制excel文件内容粘贴后生成的 ...
前端学习（3053）：vue+element今日头条管理-展示列表分页
Vue - 超详细 “横向滚动“ 弹幕效果功能组件源码，类似视频与直播间的发言弹幕（支持自定义弹幕样式 / 开启暂停弹幕播放 / 清空弹幕 / 修改弹幕移动速度 / 发送插入自己的弹幕并高亮显示等）
前言网上的教程都太乱了,并且全是 BUG 根本无法改造到自己的项目中去. 本文实现了在 Vue / Nuxt 项目中,实现弹幕飘过的效果,支持网络请求数据 / 自定义弹幕样式 / 开启暂停弹幕播放 ...
Echarts 柱状图横向展示和竖向展示
第021个点击查看专栏目录本示例是显示柱状图,分别是横向展示和纵向展示.关键是X轴和Y轴的参数互换. 文章目录横向示例效果横向示例源代码(共81行) 纵向示例效果纵向示例源代码(共81行) ...
Vue 里，多级菜单要如何设计才显得专业？
老生常谈了! 虽然我们是 Java 猿,但是写起来前端代码也不含糊!今天我想来和大家聊聊这个前端的动态菜单,要如何设计才显得专业!还是以我们的 TienChin 项目为例,大家一起来看看. 先来一张截 ...
ant vue 树形菜单横向显示_快速实现一个简单可复用可扩展的Vue树组件
来源 | https://wintc.top/article/13大概因为平时工作项目的原因,写了很多次树形组件,越写越觉得可以写得更简单并且更具有复用性.扩展性.树组件的应用场景很多,比如一篇文章的 ...
android tab切换菜单内容分页,8月23号 Tab菜单页面切换和jsp分页查询
android ViewPager实现App主界面Tab菜单页面切换和点击事件首先需要创建3个.xml文件,简单设置背景和一些简单组件,tab1.xml,tab2.xml,tab3.xml 之后是对 ...
ant vue 树形菜单横向显示_ant design vue menu 导航菜单
ant design vue menu 导航菜单 ant design vue menu 导航菜单是一个网站或者系统的重要功能,通过导航可以对网站或者系统的功能进行分门别类. 水平导航菜单例子首页 ...

vue里tab菜单横向展示，可分页功能组件实现

vue里tab菜单横向展示，可分页功能组件实现相关推荐

最新文章

热门文章