uniapp 页面滚动到指定位置的方法

不想吃饭e2024-04-27 4:03

方法一：使用uni.pageScrollTo 使页面纵向滚到到指定位置

复制代码

uni.pageScrollTo({
	scrollTop: 0,
	duration: 300
});

如果滚动无效，可以尝试将代码放在settimeOut（异步），或者nextTick（微任务）。若仍滚动无效，可以将html为外层的盒子高度设置为 height:auto!important;

方法二：使用<scroll-view>标签，可以将页面横向（或纵向）滚动到指定位置

html

html 复制代码

<scroll-view scroll-x="true" class="scrollSku" :scroll-left="scrollLeft">
		<view v-for="(item,index) in data" :key="item.id" :id="'target'+index">
		</view>
</scroll-view>

复制代码

changeScroll(index) {
	uni.createSelectorQuery().in(this).select('#target' + index)
		.boundingClientRect(res => {
	   let left = res.left < 0 ? res.left + 20 : res.left - 20
	   this.scrollLeft = left; // 设置滚动条距离左侧的距离    				        
   }).exec();
},