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 天前
uniapp与蓝牙设备连接详细步骤
前端·微信小程序
万岳科技系统开发1 天前
私域直播系统开发从0到1:企业直播平台搭建全过程
前端·小程序·架构
2501_916007471 天前
iOS应用性能优化全面指南:从内存管理到工具使用
android·ios·性能优化·小程序·uni-app·iphone·webview
i220818 Faiz Ul1 天前
理财系统|基于java+vue的家庭理财系统小程序(源码+数据库+文档)
java·vue.js·spring boot·小程序·论文·毕设·理财系统
河北清兮网络科技1 天前
企业软件开发全流程:从需求到上线,如何高效落地?
小程序·app·短剧·短剧app·广告联盟
维双云1 天前
想做企业公司的教育知识付费小程序多少钱?
小程序
huang_jimei1 天前
【无标题】
微信小程序
柚鸥ASO优化2 天前
微信正在变成“搜索引擎”:小程序SEO机会全面爆发
搜索引擎·微信·小程序·小程序优化
巴博尔2 天前
UNIAPP中NVUE页面 动画
android·前端·javascript·ios·uni-app
Brave & Real2 天前
小程序 const 在js中以及与同类的var和let之间的差异
javascript·微信小程序·小程序