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()
},
相关推荐
说私域1 小时前
基于开源链动2+1模式AI智能名片S2B2C商城小程序的赛道力构建与品牌发展研究
人工智能·小程序
Amewin3 小时前
在vue3+uniapp+vite中挂载全局属性方法
javascript·vue.js·uni-app
码起来呗10 小时前
基于微信小程序的旅游攻略分享互动平台设计与实现-项目分享
微信小程序·小程序·旅游
2501_9151063212 小时前
App HTTPS 抓包 工程化排查与工具组合实战
网络协议·ios·小程序·https·uni-app·php·iphone
郑叔敲代码12 小时前
帝国cms微信小程序 微信授权登录api接口
微信小程序·帝国cms小程序·帝国cms开发
dcloud_jibinbin13 小时前
【uniapp】小程序体积优化,分包异步化
前端·vue.js·webpack·性能优化·微信小程序·uni-app
2501_9160088914 小时前
金融类 App 加密加固方法,多工具组合的工程化实践(金融级别/IPA 加固/无源码落地/Ipa Guard + 流水线)
android·ios·金融·小程序·uni-app·iphone·webview
2501_9159214314 小时前
Fastlane 结合 开心上架(Appuploader)命令行版本实现跨平台上传发布 iOS App 免 Mac 自动化上架实战全解析
android·macos·ios·小程序·uni-app·自动化·iphone
游戏开发爱好者816 小时前
iOS 上架要求全解析,App Store 审核标准、开发者准备事项与开心上架(Appuploader)跨平台免 Mac 实战指南
android·macos·ios·小程序·uni-app·iphone·webview
00后程序员张17 小时前
混淆 iOS 类名与变量名的实战指南,多工具组合把混淆做成工程能力(混淆 iOS 类名变量名/IPA 成品混淆Ipa/Guard CLI 实操)
android·ios·小程序·https·uni-app·iphone·webview