uniapp组建scroll-view初始化页面设置scrollTop无效解决办法

1024小神2024-11-29 16:33

一 . scroll-view的基本用法

使用竖向滚动时，需要给 <scroll-view> 一个固定高度，通过 css 设置 height；

html 复制代码

<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
</scroll-view>

在实际运用过程中，发现设置了scroll-top无效，滚动条位置并没有发生变化，是因为微信小程序的官方框架处于性能考虑，初始化设置scroll-top不会重新渲染页面，需要将scroll-top的是放在一个事件内执行才可以生效。

这里有一个坑，初始值设置（注意：不要设置成0，不然无效）

javascript 复制代码

	const scrollTop = ref(0.01)

需要将scroll-top的是放在一个事件内执行才可以生效。

javascript 复制代码

const goTop = ()=>{
    scrollTop.value = scrollTop +0.00001
}

这里也有一个坑，如果事件执行时，scrollTop的值和原来一样，他是不会生效的(就算页面滚动了，但是scrollTop是不变的)，所以在触发回到顶部事件，重新赋值的时候，可以加一个0.0001，页面就会回到顶部了。

注意：触发几次就要加几次，因为每次的值都不能和之前的值一样。

因为请求接口拿到数据之后，重新给列表赋值，scroll-view列表就需要时间渲染出来，等渲染出来之后，才可以设置scroll-top高度，不然没渲染出来之前，scroll-view没有高度，你设置scroll-top肯定是无效的。所以拿到数据之后，要等个500毫秒再设置：

javascript 复制代码

setTimeout(() => {
            setLevelTop.value = 300
        }, 500)