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

子组件：

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

父组件：

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

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