uniapp手写一个tab标签页组件

<template>
	<div class="tab_out_wrap">
		<view class="tab_list_inner_wrap" >			
			<view  v-for="(tab,index) of list" :key="index" class="tab_item"  
				:class="{ 'active': curIndex === index }" 
				@click="handlerClick(item,index)"
			>
				<view class="tab_title">{{tab.name}}</view>				
			</view>
		</view>
		<view class="tab_icon"
		:style="styleObj">
		</view>
	</div>
</template>

<script setup>
import {
		reactive,
		ref,
		computed,
		watch,
		onMounted,
		nextTick,
		getCurrentInstance
	} from 'vue';
	const curIndex=ref(0)
	const tabWidth=ref(30)
	const list=ref([
						{
		                    name: '关注',
		                }, {
		                    name: '推荐',
		                }, {
		                    name: '电影'
		                }, {
		                    name: '科技'
		                }, {
		                    name: '音乐'
		                }
		            ])
	const  handlerClick=(item,index)=>{
		curIndex.value=index
		console.log("curIndex.value:",curIndex.value);
	}
	const styleObj=computed(()=>{
		console.log("curIndex:",curIndex.value);
		let obj={
			width:`${tabWidth.value}px`,
			transform:`translateX(${curIndex.value * tabWidth.value}px)`
		}	
		console.log("obj:",obj);
		return obj
	})
	
	const getEle=()=>{
		const {proxy} = getCurrentInstance();
		return new Promise((resolve,reject)=>{
			let view=uni.createSelectorQuery().in(proxy)
			view.selectAll('.tab_item').boundingClientRect(data => {
				resolve(data)
			}).exec()
		})
	}
	
	onMounted(async()=>{
		
		let res=await getEle();
		tabWidth.value=res[0].width
		console.log("getEle--res-",res)
		console.log("getEle--res-wid",res[0].width)
	})
	
	
</script>

<style scoped lang="scss">
.tab_item{
	position: relative;
}
.tab_title{
	padding: 10rpx;
	box-sizing: border-box;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 28rpx;
}
.tab_list_inner_wrap{
	display: inline-flex;
	position: relative;
}
.tab_icon{
	// position: absolute;
	// left:0;
	// bottom:0;
	// width: 40rpx;
	height: 4rpx;
	background: #f00;
	transition: transform 0.3s ease-in;
}
.active{
	color:#f00 !important
}
.test{
	width: 240rpx;
}
</style>