Vue实现微信小程序tab导航栏下划线过渡动画

本文介绍移动端中常用的tab导航栏下划线动画，仅针对点击切换不支持滑动切换
html部分：

	
		
			
				{{menu}}
			
			
		
	

CSS部分

.menu-box{
	width: 15%;height: 80rpx;font-size: 16px;display:flex;flex-direction: column;align-items: center;
}
.tabtrue{
	font-weight:bold
}
.bottom_line{
	width: 40rpx;height: 4rpx;background-color: #007AFF;position: absolute;bottom: 8rpx; transition: all .2s linear;
}

js部分

export default {
		data() {
			return {
				activeindex:0,
				menulist:['商品','评价','店铺']，
				left:0
			}
		}，
		methods: {
				choosemenu(menuindex){
					this.activeindex = menuindex
					setTimeout(()=>{
						this.changeline()
					},100) 		//做一个短暂的延迟保证选中的tab是用户点击的tab
				},
				changeline(){
					const query = uni.createSelectorQuery()
					query.select('.tabtrue').boundingClientRect().exec((res)=>{
						this.left = res[0].left + uni.upx2px(36)		//计算出当前选中的tab距离窗口左侧距离加上tab选项宽度减去下划线宽度除以2（目的：让下划线居中）
					})
				}
	}
}