uniapp开发小程序 使用scroll-view时左右滑动切换无法回到最左边的bug解决方案

bug场景：项目中是会用了tabs，scroll-view，在切换的时候，选择最右边的分类，切换tabs回来之后没有默认的值已经切换最左边，但是页面没有滚动到最左边

按理说，要让scroll-view横向滚动回到最左边，我们可以使用scroll-left属性，设置为0即可回到最左边。通过动态设置scroll-left的值，并调用scroll-view的scrollTo方法或直接改变scroll-left的值并刷新视图，可以实现滚动到最左边，但是实际上给了scroll-left，重置了scroll-left为依然没有回到最左边，这就是问题所在

这是原来的代码，

		<u-tabs :list="list" :is-scroll="false" :current="tabsCurrent" active-color="#1F2533" bg-color="transparent" inactive-color="#748099" bar-width="0" @change="change"></u-tabs>
		<!-- 标签 -->
		<view class="label">
			<scroll-view  :scroll-left="scrollFeft" :scroll-x="true"  :show-scrollbar='false'  >
				<view class="label-scroll">
					<view class="label-item" v-for="(item, i) in classificationlList"  :key="i" :class="i == labelCurrent ? 'label-active' : 'label-color'" @click="clickLabel(item, i)">
						{{tabsCurrent ? (item.name || "") : (item.typeName  || "")}}
					</view>
				</view>
			</scroll-view>
		</view>

			// 切换tabs
			change(index) {
				this.tabsCurrent = index;
				this.labelCurrent = 0;
				//业务场景....
				this.scrollFeft = 0;

			},
			// 点击分类
			clickLabel(e,i) {
				this.labelCurrent = i;
				//业务场景....
			},

核心原因是：用户手动滑动后，scroll-view 的实际滚动位置已经改变，而我们在代码中只重置了 labelCurrent 但没有真正重置滚动条的 DOM 位置。

还有一个可能，scroll-view 的滚动位置可能被小程序底层或 Vue 的渲染机制缓存了。我们需要用一个更直接、更底层的方法来强制重置。

最小改动方案

1.在你的 scroll-view 上添加一个 :key 属性：

:key="`{labelCurrent}-{new Date().getTime()}`"

2.使用 scroll-into-view 强制滚动到第一个元素，添加 scroll-into-view 绑定和第一个标签的ID，

:scroll-into-view="scrollIntoId"

:id="i == 0 ? 'firstLabel' : ''"

3.在 data 中添加控制变量，并修改 change 方法，

置滚动到第一个标签

this.scrollIntoId = 'firstLabel';

暂延迟后清空ID，以便下次能再次触发

setTimeout(() => {
this.scrollIntoId = '';
}, 100);

击标签时，要确保 scrollIntoId 是空的，以免干扰
this.scrollIntoId = '';

修改后代码：

html：

		<!-- tabs -->
		<u-tabs :list="list" :is-scroll="false" :current="tabsCurrent" active-color="#1F2533" bg-color="transparent" inactive-color="#748099" bar-width="0" @change="change"></u-tabs>
		<!-- 标签 -->
		<view class="label">
			<scroll-view  :scroll-left="scrollFeft" :scroll-x="true" :enhanced="true" :show-scrollbar='false' :key="`${labelCurrent}-${new Date().getTime()}`" :scroll-into-view="scrollIntoId">
				<view class="label-scroll">
					<view class="label-item" v-for="(item, i) in classificationlList" :id="i == 0 ? 'firstLabel' : ''" :key="i" :class="i == labelCurrent ? 'label-active' : 'label-color'" @click="clickLabel(item, i)">
						{{tabsCurrent ? (item.name || "") : (item.typeName  || "")}}
					</view>
				</view>
			</scroll-view>
		</view>

			// 切换tabs
			change(index) {
				this.tabsCurrent = index;
				this.labelCurrent = 0;
				if(this.tabsCurrent  == 1) {
					//业务场景....
					}
				}else{
					// 查询商品所有一级分类
					this.getShopTypeList();
				}
				this.parseLoaded();
				this.scrollFeft = 0;
				this.scrollIntoId = 'firstLabel';
				setTimeout(() => {
					this.scrollIntoId = '';
				}, 100);
			},
			// 点击分类
			clickLabel(e,i) {
				this.labelCurrent = i;
				//业务场景....
				this.scrollIntoId = '';
			},