直播软件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菜单横向展示，可分页功能组件实现， 更多内容欢迎关注之后的文章