微信小程序(uniApp)：scroll-view横向滚动实现点击元素滚动到页面中间的效果

wxml:

<scroll-view
	class="scroll"
	scroll-x='true'
	scroll-with-animation
	:scroll-left='scrollLeft'>
	<view 
		v-for="(item, index) in tabsList" :key='item.id'
		:class="[{active: currentIndex === index }, 'scroll-item']"
		@click="changeTab(index)">
	{{item.name}}
	</view>
</scroll-view>

wxss:

.scroll{
	width: 100%;
	white-space: nowrap;
	view{
		display: inline-block;
		font-size: 30upx;
		font-weight: 400;
		line-height: 42upx;
		padding: 18upx 30upx;
		color: #000;
		position: relative;
		&.active{
			font-size: 36upx;
			font-weight: 800;
			line-height: 50upx;
		}
		&.active::after{
			content: '';
			display: block;
			width: 100%;
			border-left: 30upx solid #fff;
			border-right: 30upx solid #fff;
			box-sizing: border-box;
			height: 19upx;
			position: absolute;
			left: 0;
			bottom: 19upx;
			background: #FFC385;
			z-index: -1;
		}
	}
}

js(重点部分)

// 切换当前Tab
changeTab(index){
	this.$emit('changeTab', index)
	this.moveTo(index)
},
// 将点击元素移动到中间
moveTo(index) { 
	const query = uni.createSelectorQuery().in(this)
	query
		.selectAll(`.scroll-item`)
		.boundingClientRect(rect => {
			const windowWidth = this.$store.state.windowWidth			// 屏幕宽度
			let width = 0
			// 循环获取计算当前点击的标签项距离左侧的距离
			for (let i = 0; i < index; i++) {
				width += rect[i].width
			}
			// 当大于屏幕一半的宽度则滚动，否则就设置位置为0
			if (width > windowWidth / 2) {
				this.scrollLeft = width + rect[index].width / 2 - windowWidth / 2
			} else {
				this.scrollLeft = 0
			}
	}).exec()
},