场景：左侧菜单栏，每次切换时，需要右侧商品展示区保持滚动条及页面在最顶部
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博客
