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

旧城等待， 2022-10-18 15:58 37阅读 0赞

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

效果图：  
![在这里插入图片描述][20210709085938637.jpg_pic_left]  
![在这里插入图片描述][20210709085946506.jpg_pic_left]  
子组件：

<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>

[20210709085938637.jpg_pic_left]: /images/20221005/1459cf6972ba433f8382b28e863331f5.png
[20210709085946506.jpg_pic_left]: /images/20221005/e394da51a1164193a4a30eb35fd986b6.png