Nav组件开发

<template>
	<div class="container">
		<span>{{nextIndex}}--{{distance}}--{{currentIndex}}</span>
		<ul class="menu">
			<li v-for="(item,index) in menu" :key="index"  @click="transfernext(index)">{{item}}</li>
		</ul>
		<div class="bottom" ref="bottom"></div>
	</div>
</template>
<script>
	export default{
		props:{},
		data(){
			return{
				menu:['综合','视频','番剧','影视','直播','专栏','话题','用户'],
				currentIndex:0,
				nextIndex:0,
				distance:0
			}
		},
		components:{},
		methods:{
			transfernext(index){
				// 
				this.nextIndex = index
				// this.distance = (this.nextIndex - this.currentIndex)*122
				this.distance = index*122 
				this.currentIndex = index//将当前置为本次点击的索引
				this.$refs.bottom.style.transform = `translateX(${this.distance}px)`
				//transform:translateX是从当前移动到参数内位置，所以只需计算目标位置
			}
		},
		mounted(){},
		created(){},
		watch:{}
	}
</script>

<style scoped lang="scss">
	.container{
		position: relative;
		margin: 0 auto;
		width: 980px;
		height: 100px;
		.menu{
			display: flex;
			justify-content: space-between;
				
			li{
				text-align: center;
				cursor: pointer;
			}
			
		}
		.bottom{
			position: absolute;
			bottom: 0;
			width: 50px;
			height: 5px;
			border-radius: 5px;
			background-color: deepskyblue;
			transition: all 0.2s ease;
		}
	}
</style>