开发一个uniapp项目时，需要使用做一个能左右滑动的表，如下图

.nav-tab-wrap{
		width: 100%;
		white-space: nowrap;
		.nav-tab{
			position: relative;
			display: flex;
			justify-content: space-around;
			.nav-tab-item{
				margin-right: 60rpx;
				line-height: 80rpx;
				display: inline-block;
				color: #333333;
				font-weight: bold;
				font-size: 30rpx;
				&:nth-of-type(1){
					margin-left: 60rpx;
				}
				&.active{
					color: #00a1ff; 

				}
			}
			// uni-view.underline {
			// 	left: 130rpx !important;
			// 	width: 150rpx !important;
			// }
			.underline{
				position: absolute;
				width: 40rpx;
				height: 5rpx;
				background-color: #00a1ff;
				left: 20rpx;
				bottom: 0;
				transition: 0.4s;
			}
		}
	}

1.template

<scroll-view scroll-x class="nav-tab-wrap" :throttle="false" @scroll="scrollEvent">
		<view class="nav-tab">
			<block v-for="(item,index) in tabList">
				<view class="nav-tab-item" :class="{'active':currentIndex==index}" @tap="changeTab(index)">{{item}}</view>
			</block>
			<view class="underline" :style="'left:'+ left +'px;width:'+ width +'px;'"></view>
		</view>
	</scroll-view>

	<swiper class="swiper" :current="currentIndex" @change="changeIndex" style="touch-action: none;">
		<swiper-item v-for="(item, index) in contentList" :key="index">
			<scroll-view style="height: 100%;" scroll-y>
				<view>{{ item.content }}</view>
			</scroll-view>
		</swiper-item>
	</swiper> 

 2.script

currentIndex: 0,
		contentList: [
			{
				content: '首页1'
			},
			{
				content: '首页2'
			},
		], //
		value: "",
		currentIndex:0, //当前选中的索引值
		tabList:["浓度设备", "状态设备"],
		left:uni.upx2px(123), //滑动条左边距离
		width: uni.upx2px(160), //滑动条宽度
		scrollX:0, //滚动条的位置
		space:uni.upx2px(-20),//滑动条和item的左右间距
		navIndex: 0,

methods：
changeTab(num){
		let that = this;
		that.currentIndex = num;
		let selectorQuery = uni.createSelectorQuery().in(that);
		selectorQuery.selectAll('.nav-tab-item').boundingClientRect(function(data) {
			// data 为当前选中tab的节点信息
			that.left = data[num].left + that.scrollX + that.space;
			that.width = data[num].width - that.space*2;
		}).exec();
		console.log(num);
	},
	scrollEvent(e){
		this.scrollX = e.detail.scrollLeft;
	},
	changeIndex(e) {
		this.currentIndex = e.detail.current;
		console.log(e);
		let that = this;
		let selectorQuery = uni.createSelectorQuery().in(that);
		selectorQuery.selectAll('.nav-tab-item').boundingClientRect(function(data) {
			// data 为当前选中tab的节点信息
			that.left = data[e.detail.current].left + that.scrollX + that.space;
			that.width = data[e.detail.current].width - that.space*2;
		}).exec();
		// this.scrollEvent();
	}