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 => {
					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>