partnerApp/components/modules/tools/team/swiper-tab.vue

<template>
	<view class="uni-tab-bar">	
		<scroll-view class="scroll-view content-scroll" scroll-x  scroll-with-animation :scroll-left="scrollLeft">
			<block v-for="(tab,index) in tabBars" :key="index">
				<view class="scroll-view-item scroll-item"
					:class="{'active':tabIndex==index}"
					@tap="tabtap(index)" 
					>
					<view class="d-flex a-center j-center">{{tab.name}}</view>
					<view class="d-flex a-center j-center">({{tab.personNum}}人，{{tab.orderNum}}单)</view>
				</view>
			</block>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				contentScrollW: 0, // 导航区宽度
				scrollLeft: 0, // 横向滚动条位置
			}
		},
		props:{
			tabBars:Array,
			tabIndex:Number
		},
		 mounted() {
		     // 获取标题区域宽度，和每个子元素节点的宽度
		     this.getScrollW()
		 },
		methods:{
			tabtap(index){
				this.scrollLeft = this.tabBars[index].left - this.contentScrollW / 2 + this.tabBars[index].width / 2;
				this.$emit('tabtap',index);
			},
			// 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
			getScrollW() {
			    const query = uni.createSelectorQuery().in(this);
			    
			    query.select('.content-scroll').boundingClientRect(data => {
			        // 拿到 scroll-view 组件宽度
			        this.contentScrollW = data.width
			    }).exec();
			    
			    query.selectAll('.scroll-item').boundingClientRect(data => {
					console.log(data)
			        let dataLen = data.length;
			        for (let i = 0; i < dataLen; i++) {
			            //  scroll-view 子元素组件距离左边栏的距离
			            this.tabBars[i].left = data[i].left;
			            //  scroll-view 子元素组件宽度
			            this.tabBars[i].width = data[i].width
			        }
			    }).exec()
			},
			
			
			
		}
	}
</script>

<style>
/* 横向滚动选项Start */
	.scroll-view {
		white-space: nowrap;
		width: 100%;
	}
	.scroll-view .scroll-view-item {
		display: inline-block;
		width: 40%;
		font-size: 30rpx;
		padding: 10upx 20upx;
		box-sizing: border-box;
		border: ;
	}
	.scroll-view .scroll-view-item.active{
		border-bottom: 10rpx solid #007AFF;
	}
	.scroll-view .scroll-view-item>view:nth-of-type(2){
		font-size: 24rpx;
	}
	/* 横向滚动选项Start */
</style>