<template> <div class="page"> <div class="nav-tabs-container"> <div class="bottom-line" :style="{transform:`translateX(${barStyle}px)`}"/> <div class="tab-text" v-for="(item,index) in arrData" @click="bandaa(index)">{{item}}</div> </div> </div> </template> <script> export default { components: {}, data() { return { type:'', bottomLineLeft:0, arrData:[1111111,1111111,11111111111,1111111111111111,111111111111111] }; }, computed: { barStyle:{ get() { let offset = 0 const containerDocument = document.getElementsByClassName('nav-tabs-container')[0] const childDocument = containerDocument ? containerDocument.querySelectorAll('.tab-text') : [] const childDocumentList = Array.from(childDocument).map(item => item.offsetWidth) childDocumentList.slice(0, this.type).map(item =>{offset += item}) offset += childDocumentList[this.type]/2 - 25 return offset } } }, mounted() { this.type = 0 }, methods: { bandaa(index){ this.type = index }, } }; </script> <style lang="scss" scoped> .nav-tabs-container{ position: relative; .tab-text{ float: left; padding: 20px; } .bottom-line{ width: 50px; height: 4px; transition: transform .3s,-webkit-transform .3s; background-color: #3a8ee6; } } </style>
完美的头部导航 底边宽度固定并且挪动
最新推荐文章于 2022-01-14 14:18:51 发布