scrollTop不生效解决

直接解决不废话,两个问题仔细看



一、使用scroll-view容器设置:scroll-top=“scrollTop” 不生效

在这里插入图片描述

原因:其实很简单,不生效就是没有执行,因为uniapp的scroll-view组件限制:在某些情况下,直接设置相同的scroll-top值可能不会触发重新渲染

1.scroll-view容器重写机制影响

举🌰子:
如果你是下面这种或者甚至不进行重写,他确实执行了这个方法但是组件内部认为值未变更所以不执行,超级简单

scrollTopFun() {
				this.scrollTop = 0;
				// 1秒后重置滚动位置(uni.scrollTop机制需要改变值热重载,否则不生效)
				setTimeout(() => {
					this.scrollTop = 0;
				}, 50);
			},

直接设置重写即可

scrollTopFun() {
				this.scrollTop = 1;
				// 1秒后重置滚动位置(uni.scrollTop机制需要改变值热重载,否则不生效)
				setTimeout(() => {
					this.scrollTop = 0;
				}, 50);
			},

2.scroll-view容器未设置固定高度

*注意事项*

如果如上设置了参数,也设置了:scroll-top="scrollTop"未生效,考虑是不是没有给容器设置固定高度,如果容器不设置固定高度滚动无效哦

<scroll-view scroll-y="true" :scroll-top="scrollTop" style="height: 600rpx">
	<view>
		<!-- ···你的内容 -->
	</view>
</scroll-view>

二、uni.pageScrollTo设置scrollTop滚动无效

代码如下(示例):

	uni.pageScrollTo({
	 scrollTop: 0,  //锚点位置
	 duration: 300  //过渡时间
	});

其实这个就更简单了,如果使用了scroll-view就使用上面的方法即可,如果没使用scroll-view,那就检查一下需要滚动的容器是否处于根节点,因为uni.pageScrollTo 属于页面级别的滚动,需要处于根节点才能生效


总结

  • 问题一:scroll-view组件需要值变化才会触发重绘,试试先设个假值再改回来,就像哄小孩吃药先给颗糖🍬
  • 问题二:没给scroll-view定高度就像让跳高选手在游泳池比赛——根本蹦跶不起来🏊‍♂️

终极提醒:uni.pageScrollTo只认页面级滚动,别把它关在小黑屋(子容器)里干活!❌

Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐