uniapp设置滚动条滚动到指定位置-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp设置滚动条滚动到指定位置。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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博客文章来源地址https://www.toymoban.com/news/detail-486891.html

到了这里，关于uniapp设置滚动条滚动到指定位置的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！