Uniapp或者微信小程序如何动态的计算Scrollview的高度

最新推荐文章于 2025-04-18 21:27:43 发布

HolleBug

最新推荐文章于 2025-04-18 21:27:43 发布

阅读量4.3k

点赞数 1

文章标签： uni-app 微信小程序小程序

本文链接：https://blog.youkuaiyun.com/qq_45364616/article/details/132429282

版权

本文介绍了在小程序中，如何使用Scrollview实现顶部搜索栏或分类查询的固定，并通过`setScrollHeight`函数获取Scrollview距顶部的高度，结合页面高度和操作条高度计算出准确的Scrollview高度。关键在于确保在onReady生命周期内执行代码以获取准确元素尺寸。

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

当一个小程序页面，顶部有搜索栏，或者分类查询时，我们想要保证它们能固定到顶部，就需要使用到Scrollview，那么如何确定Scrollview就是一个问题，这时我们可以使用以下代码来实现

setScrollHeight(view = '#scrollView', name = 'scrollHeight') {
	let that = this
	uni.getSystemInfo({
		success: function(res) {
			const query = uni.createSelectorQuery().in(that).select(view);
			query.boundingClientRect(data => {
				that[name] = res.windowHeight - data.top
			}).exec();
		}
	});
},

先获取Scrollview距离顶部的高度，然后页面高度减去顶部距离，就能得到剩余的内容高度，如果底部还有操作条，那么我们再减去其高度，就能得到具体的Scrollview高度了

注意点是为了能准确的获取到页面元素，从而准确计算高度，我们需要将代码放到onReady生命周期里运行