uniapp scroll-view 设置scrollTop无效

一 . scroll-view的基本用法

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

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

 二.设置scrollTop无效

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

         这里有一个坑,初始值设置(注意:不要设置成0,不然无效)

	const scrollTop = ref(0.01)

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

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

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

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

猜你喜欢

转载自blog.csdn.net/peachban/article/details/134199147