直播软件app开发，vue里tab菜单横向展示，可分页功能组件实现

直播软件app开发，vue里tab菜单横向展示，可分页功能组件实现

子组件：

<template>
<div>
    <el-button v-if="move != 0 && !dataLen" size='small' icon="el-icon-arrow-left" @click="navPrev"></el-button> 
    <ul ref="dataNavList">
        <li @click="tabInfo(item)" 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 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>

 以上就是直播软件app开发，vue里tab菜单横向展示，可分页功能组件实现， 更多内容欢迎关注之后的文章