uniapp设置滚动条滚动到指定位置

场景：左侧菜单栏，每次切换时，需要右侧商品展示区保持滚动条及页面在最顶部

 

1.利用scroll-view 中scroll-top属性实现

1.1设置scrollToTop属性为0

data() {
	return {
		// 保证每次切换，滚动条位置都在最顶部
		scrollToTop: 0,
	};
}

1.2 菜单栏切换时clickFirstCategory切换scrollToTop的值

scrollToTop在0，1之间切换，通过1px的差别使页面可以正常渲染

<!-- 左侧菜单栏 -->
			<scroll-view class="category-first" :enable-flex="true" scroll-y :show-scrollbar="false"
				:scroll-with-animation="true">
				<view @click="clickFirstCategory(index)" :class="['first-item',isActive===index?'active':'']"
					v-for="(category,index) in categoryList" :key="category.cat_id">
					{{category.cat_name}}
				</view>
			</scroll-view>

clickFirstCategory(index) {	
	// 每次点击都保证scroll滚动条在最顶部
	this.scrollToTop = this.scrollToTop ? 0 : 1
},

<!-- 右侧商品列表 -->
<scroll-view class="category-content" :enable-flex="true" scroll-y :show-scrollbar="false"
	:scroll-top="scrollToTop" :scroll-with-animation="true">
...
</scroll-view>

2.使用uni.pageScrollTo()方法

<template>
	<view style="height: 2000px;" class="cart-box">
		顶部
	</view>
	<button @click="backToTop">backToTop</button>
</template>

<script>
	export default {
		data() {
			return {
			};
		},
		methods: {
			backToTop(){
				uni.pageScrollTo({
					selector: ".cart-box",
					scrollTop: 0
				})
			}
		},
	}
</script>

3.uni.pageScrollTo()和scroll-view组件使用区别

1）使用 uni.pageScrollTo 方法，属于页面级别滚动。

如果传入 scrollTop 不起效，应该是布局的问题， 它是页面级的滚动：所有的 滚动单元 必须是在根元素下，由 滚动单元 直接撑起来的高度，就可以滚动到指定位置。
2）使用 scroll-view 标签的属性：scroll-top(距离值 num) 或 scroll-into-view(子元素的id,不能以数字开头 string); 属于区域级别滚动。
两种方式的前提是：提供具体的高度值

参考：uniapp 将元素滚动到指定位置的两种方法总结_uniapp滚动到指定元素的位置_铁锤妹妹@的博客-CSDN博客