uniapp scroll-view 设置scrollTop无效

本文介绍了微信小程序中scroll-view组件的使用,强调了设置scroll-top的注意事项。官方框架出于性能考虑,初始化时scroll-top可能无效,需在事件中动态更新。特别提到,初始值不能设为0,且触发回到顶部事件时,需微小调整scrollTop值以确保生效。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一 . 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,页面就会回到顶部了。

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

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值