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

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

javascript 复制代码
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生命周期里运行

javascript 复制代码
onReady() {
	this.setScrollHeight()
},
相关推荐
2501_915909063 小时前
Ipa Guard 防护上架,混淆、重签名和回归测试怎么做
android·ios·小程序·https·uni-app·iphone·webview
鸿蒙开发7 小时前
# 代码写完才发现不能上线:微信小程序开发前必须准备的 8 件事
微信小程序·产品经理
李纲明7 小时前
微信小程序 web-view 打开空白或提示未配置业务域名:校验文件、HTTPS 与跳转域名排查
前端·微信小程序·https·web-view·小程序开发·业务域名
济南壹软网络科技有限公司7 小时前
盲盒源码系统小程序V6MAX底层架构解析,PHP+Uniapp高性能商用底座发布
小程序·架构·uni-app
2501_915918418 小时前
iOS 上架注意事项有哪些?Appuploader 的四个阶段自查清单
android·ios·小程序·https·uni-app·iphone·webview
Autumn_ing8 小时前
AI原型设计工具怎么选?可编辑原型与可运行前端适合什么场景
前端·小程序·产品经理·代码·codex·墨刀ai客户端·ai原型
fengGer的bugs8 小时前
微信小程序实战:本地存储的新生儿喂养记录(原生 + 四套主题 + 疫苗日程)
微信小程序·小程序
Ai-_Man9 小时前
我需要批量导出Poe左边栏所有对话,而不是一条具体的对话内容,你们AI导出鸭可以吗?
开发语言·前端·javascript·人工智能·小程序
青企通10 小时前
二手交易小程序的担保交易:资金托管、状态机与争议处理
小程序
andrsted1 天前
练题簿免费刷题小程序:和学习搭子共用一份题库,一起刷题复习
学习·面试·微信小程序·小程序·学习方法·刷题