uni设置scroll-top为0无效

在uniapp中使用scroll-view组件时,直接设置scroll-top为0无法回到顶部。本文提供了解决方案,通过记录滚动条位置,先设置当前滚动位置再归零,实现平滑滚动至顶部。

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

uniapp里面使用scroll-view 组件,动态设置scroll-top 属性来控制滚动高度,但是当想滚动到起始位置时 设置动态值为0 时无效的。

具体原因还在找,但是找到了解决方法。

首先要定义一个变量记录滚动条的位置

<scroll-view :style="{'background-color': currentTheme.backgroundColor}" 
		@scroll="scrollChange" 
		:scroll-top="scrollTop"
		:scroll-with-animation="scrollAnimation"
		scroll-y="true" >

用 @scroll="scrollChange"  监听 滚动条变化

scrollChange (e) {
				this.lastScrollY = e.detail.scrollTop;
			},

定义一个变量 存滚动的位置

当需要滚动到 初始值的时候 

that.scrollAnimation = false;//是否有过度效果
				that.scrollTop = that.lastScrollY
				that.$nextTick(function(){
					that.scrollTop = 0;
				})

先将滚动的当前高度赋值给scrollTop 然后设置为0 就有效果了

其他情况如果直接设置无效时,也可以用类似的方法

uni-app中,`scroll-view` 组件用于提供可滚动的视图区域。如果你想通过设置竖向滚动位置0来让滚动视图回到顶部,你通常会使用 `scroll-into-view` 属性。然而,根据uni-app的官方文档和社区反馈,有时候直接设置 `scroll-into-view` 并不能达到预期的效果,特别是当涉及到动态内容或者组件嵌套较多的情况。 对于这种问题,你可以尝试以下方法来强制滚动到顶部: 1. 直接给 `scroll-view` 组件设置 `scroll-top` 属性,并将其值设置0。`scroll-top` 是控制滚动视图垂直滚动位置的属性。 示例代码如下: ```html <scroll-view scroll-y="true" style="height: 300px;" :scroll-top="0"> <!-- 内容 --> </scroll-view> ``` 2. 如果上述方法仍然无效,可能是因为 `scroll-view` 内部的内容没有更新或者组件状态没有正确触发。确保你已经更新了引起滚动位置变化的数据,并且可以使用 `uni.nextTick()` 来确保DOM更新后再设置 `scroll-top`。 3. 另外,你可以考虑使用 `uni.createSelectorQuery()` 来获取 `scroll-view` 的引用,并通过 `boundingClientRect()` 方法获取其高度,然后通过 `scrollIntoView()` 方法来滚动到指定的元素上,如果滚动到顶部,就把这个元素设置为 `scroll-view` 的第一个子元素。 示例代码如下: ```javascript onReady: function() { this.queryScrollTop(); }, methods: { queryScrollTop: function() { var that = this; uni.createSelectorQuery() .select(&#39;.scroll-view&#39;) .boundingClientRect() .exec(function(entries) { if (entries.length > 0) { const node = entries[0]; node.scrollIntoView(); } }); } } ``` 在使用上述方法时,请确保你的 `scroll-view` 组件有正确的高度设置,并且内部内容足以触发滚动
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值