当用户点击分类项时，会自动滚动分类栏，uniapp

当用户点击分类项时，会自动滚动分类栏。这可以引导用户了解到分类栏是可滚动的，并改善用户体验。

1.效果：

2.代码：

<template>
	<view class="center-cut-menu">
		<scroll-view scroll-x="true" scroll-with-animation="true" class="scroll-view" :scroll-left="scrollLeft">
			<view class="scroll-item" v-for="(item, index) in bb" :key="index" @click="changeMenu(index)">
				<text class="item-text" :class="curIndex == index? 'active' : ''">{{item.name}}</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bb: [{
						name: 'AAAAAAAAAAAAAA',
						id: '1'
					},
					{
						name: 'bbbBBBBBBBBB',
						id: '2'
					},
					{
						name: 'cASDASDASDASD',
						id: '3'
					},
					{
						name: 'dddddddAAAASddd',
						id: '4'
					},
					{
						name: 'ASSee',
						id: '5'
					},
					{
							name: 'AAAAAAAAAAAAAA',
							id: '1'
						},
						{
							name: 'bbbBBBBBBBBB',
							id: '2'
						},
						{
							name: 'cASDASDASDASD',
							id: '3'
						},
						{
							name: 'dddddddAAAASddd',
							id: '4'
						},
						{
							name: 'ASSee',
							id: '5'
						},
				], //分类渲染
				contentScrollW: 0, // 导航区宽度
				curIndex: 0, // 当前选中
				scrollLeft: 0, // 横向滚动条位置
			}
		},
		mounted() {
			// 获取标题区域宽度，和每个子元素节点的宽度
			this.getScrollW()
		},
		methods: {
			getScrollW() {
				let query = uni.createSelectorQuery().in(this)
				query.select('.scroll-view').boundingClientRect(data => {
					this.contentScrollW = data.width
				}).exec()

				query.selectAll('.scroll-item').boundingClientRect(data => {
					let dataLen = data.length
					for (let i = 0; i < dataLen; i++) {
						this.bb[i].left = data[i].left
						this.bb[i].width = data[i].width
					}
				}).exec()
			},
			// 选择标题
			changeMenu(index) {
				this.curIndex = index
				this.scrollLeft = this.bb[index].left - this.contentScrollW / 2 + this.bb[index].width / 2
			}
		}
	}
</script>

<style lang="less">
	.center-cut-menu {
		width: 100%;
		height: 100rpx;
		box-sizing: border-box;

		.scroll-view {
			height: 100rpx;
			white-space: nowrap;

			.scroll-item {
				height: 100rpx;
				padding: 0 20rpx;
				display: inline-block;
				text-align: center;

				.item-text {
					font-size: 30rpx;
					line-height: 100rpx;

					&.active {
						color: #1468FF;
					}
				}
			}
		}
	}
</style>