partnerApp/components/common/swiper-tab-head.vue

<template>
	<view class="uni-tab-bar">
		<scroll-view scroll-x class="uni-swiper-tab content-scroll" :style="scrollStyle" scroll-with-animation :scroll-left="scrollLeft">
			<block v-for="(tab,index) in tabBars" :key="index">
				<view class="swiper-tab-list scroll-item" 
				:class="{'active':tabIndex==index}"
				@tap="tabtap(index)" 
				:style="scrollItemStyle">
					{{tab.name}} {{tab.num?tab.num:''}}
					<view class="swiper-tab-line"></view>
				</view>
			</block>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				contentScrollW: 0, // 导航区宽度
				scrollLeft: 0, // 横向滚动条位置
			}
		},
		props:{
			tabBars:Array,
			tabIndex:Number,
			scrollStyle:{
				type:String, 
				default:""
			},
			scrollItemStyle:{
				type:String,
				default:""
			}
		},
		 mounted() {
		     // 获取标题区域宽度，和每个子元素节点的宽度
		     this.getScrollW()
		 },
		methods:{
			tabtap(index){
				console.log(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>
.uni-swiper-tab{
	border-bottom: 1upx solid #EEEEEE;
}
.swiper-tab-list{
	color: #969696;
	font-weight: bold;
}
.uni-tab-bar .active{
	color: #343434;
}
.active .swiper-tab-line{
	border-bottom: 4upx solid #B9B9B9;
	width: 70upx;
	margin: auto;
	border-top: 4upx solid #B9B9B9;
	border-radius:20upx;
}
</style>