uni_app组件实现tab选项卡滑动切换，支持默认选中，vue3+ts+setup

效果截图：

前言：

最近开发小程序，需要用到tabs组件，在标签多的时候，可以左右滑动。在插件库找到uView UI，但是这个库插件体积不算太小，小程序尽可能需要减少包体积，于是就打算自己封装一下。

主要能力：选中的tab会自动移动到组件的中间位置，支持默认选中第几个tab，可联动获取数据，支持和swiper联动使用。

主要方法：scroll-view

scroll-x:true //允许横向滚动

scroll-left //设置横向滚动条位置

scroll-with-animation  //在设置滚动条位置时使用动画过渡

tabs接受的参数props，tablist是父组件传递过来的tab数组，defaultsSelectIndex默认选中的第几个tab。

计算每个tab的宽度

onMounted(() => {
		const query = uni.createSelectorQuery().in(getCurrentInstance());
		 
		query.selectAll('.tabs-scroll_item').boundingClientRect((data:Array) => {
			let dataLen = data.length;
			for (let i = 0; i < dataLen; i++) {
				//  scroll-view 子元素组件距离左边栏的距离
				itemList.value[i].left = data[i].left;
				//  scroll-view 子元素组件宽度
				itemList.value[i].width = data[i].width
			}
		}).exec()


	})

select选中的tab暴露给父组件的方法。

const emits=defineEmits<{
		(e : 'select',value : ItabItem) : void
	}>()

隐藏滑动条

/* 隐藏滚动条*/
	::v-deep.uni-scroll-view::-webkit-scrollbar {
		display: none
	}

组件实现代码tabs.vue

使用方法index.vue

希望本篇文章对你有所帮助，我也是根据自己的需求封装的，你也可以根据自己的需求在该代码上进行优化。